22
2020
04

如何居中一个浮动元素?

 方式1:设置容器的浮动方式为相对定位,然后确定容器的宽高比如宽500 高 300 的层,然后设置层的外边距。


<!DOCTYPEHTML>


<html>


<head>


<styletype="text/css">


        div{ 


            width: 500px; 


            height: 300px; 


            margin: -150px 0 0 -250px; 


            position: absolute; 


            left: 50%; 


            top: 50%; 


            background-color: yellow;  


        } 


</style>


</head>


<body>


<div>


        元素居中 


</div>


</body>


</html>


 


 


方式2:需要position:absolute;绝对定位。而层的定位点,使用外补丁margin负值的方法。负值的大小为层自身宽度高度除以二。


<styletype="text/css">


<!--


div {


position:absolute;


top:50%;


left:50%;


margin:-150px 0 0 -200px;


width:400px;


height:300px;


border:1px solid #008800;


}


-->


</style>


<div>让层垂直居中于浏览器窗口</div>


        

« 上一篇 下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。