我有一个div将有这个CSS:
#some_kind_of_popup
{
position: fixed;
top: 100px;
min-height: 300px;
width: 90%;
max-width: 900px;
}
现在,我怎样才能使这个div居中？我可以使用margin-left: -450px; left: 50%;但这仅在屏幕> 900像素时才有效.之后(当窗口<900像素时),它将不再居中.
我当然可以用某种js来做这件事,但是用CSS做"更正确"吗？
我想div是水平居中,css代码是这样的:
<style type="text/css">
#footer{
position: fixed;
bottom: 20px;
background-color: red;
width:500px;
margin: auto;/*left:auto; right:auto;*/
}
</style>
和HTML代码:
<body>
<div id="footer">hello world</div>
</body>
我认为没有必要解释我的CSS代码,它几乎是不言自明的,但div不是水平居中,有没有办法做到这一点？提前致谢.
我有一个固定的 div,我试图垂直和水平居中.是的,我知道有很多问题和教程可以执行此操作.我检查并按照说明操作.这是我实施的一个:
#draggable {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
现在,我也希望它div可以拖延.所以它应该从屏幕的中心开始,然后用户可以选择拖动它.
问题是,当你开始拖动时,div突然移动得更高.我怎样才能将固定的,可拖动的中心div？
$('#draggable').draggable();body {
width: 2000px;
height: 2000px;
background-image: url("http://www.freevector.com/site_media/preview_images/FreeVector-Square-Patterns-Set.jpg");
}
#draggable {
background-color: red;
color: lightblue;
width: 200px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}<script type="text/javascript" src="//code.jquery.com/jquery-2.1.4.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css">
<div id="draggable">Drag Me!</div>编辑我更新了示例.draggable没有设定的高度.