CSS水平垂直居中总结

行内元素水平居中

把行内元素包裹在块级父元素中,且父元素中的css设置text-align:center;

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>css水平垂直居中</title>
<style>
body{background:#000;}
#container{
background: #ccc;
text-align: center;
}
</style>
</head>
<body>
<div id="container">行内元素水平居中</div>
</body>
</html>

CSS水平垂直居中总结

块状元素水平居中

将块状元素的左右外边距设置为auto即可。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>块状元素水平居中</title>
<style>
body{background:#000;}
#container{
background: #ccc; }
#box1{
width:300px;
height:300px;
background:#fff;
margin: 0 auto;
text-align: center;
}
</style>
</head>
<body>
<div id="container">
<div id="box1">块状元素水平居中</div>
</div>
</body>
</html>

CSS水平垂直居中总结

多个块状元素水平居中的情况:

1、传统方法:将水平排列的块状元素设置为:display:inline-block;然后父元素设置为text-align:center;即可。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>多个块状元素水平居中</title>
<style>
body{background:#000;}
#container{
background: #ccc;
text-align: center;
}
.box1{
width:300px;
height:300px;
background:#fff;
display: inline-block;
}
</style>
</head>
<body>
<div id="container">
<div class="box1">块状元素水平居中</div>
<div class="box1">块状元素水平居中</div>
<div class="box1">块状元素水平居中</div>
</div>
</body>
</html>

CSS水平垂直居中总结

2、使用弹性盒子:将父元素设置为display:-webkit-box;-webkit-box-pack:justify(或center);注意兼容性

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>多个块状元素水平居中</title>
<style>
body{background:#000;}
#container{
background: #ccc;
display: -webkit-box;
-webkit-box-pack:justify;/*box-pack决定了父元素水平空间的使用*/
}
.box1{
width:300px;
height:300px;
background:#fff;
}
</style>
</head>
<body>
<div id="container">
<div class="box1">块状元素水平居中</div>
<div class="box1">块状元素水平居中</div>
<div class="box1">块状元素水平居中</div>
</div>
</body>
</html>

CSS水平垂直居中总结

已知元素宽高水平垂直居中

1、绝对定位与margin

这个方法使用了position:absolute;有固定宽高的div,被设置为top:0;bottom:0;因为它有固定高度,不能与上下的间距都为0,margin:auto;会使它居中。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>多个块状元素水平居中</title>
<style>
body{background:#000;}
#container{
background: #ccc;
position: relative;
width:1000px;
height:500px;
}
.box1{
position: absolute;
background:#fff;
width: 300px;
height: 300px;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto; }
</style>
</head>
<body>
<div id="container">
<div class="box1">已知元素宽高水平垂直居中</div>
</div>
</body>
</html>

CSS水平垂直居中总结

2、绝对定位与margin负值

利用绝对定位,将元素的top、left值设为50%,然后设置外边距margin-left:width/2;margin-top:height/2;实现垂直居中效果

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>多个块状元素水平居中</title>
<style>
body{background:#000;}
#container{
background: #ccc;
position: relative;
width:1000px;
height:500px;
}
.box1{
position: absolute;
background:#fff;
width: 300px;
height: 300px;
top: 50%;
left: 50%;
margin-left:-150px;
margin-top:-150px;
}
</style>
</head>
<body>
<div id="container">
<div class="box1">已知元素宽高水平垂直居中</div>
</div>
</body>
</html>

未知元素宽高水平垂直居中

1、把div的显示方式设置为表格,使用表格的vertical-align属性

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>未知宽高的元素水平垂直居中</title>
<style>
body{background: #000;font-size: 24px;}
#wrapper{
display: table;
background: #ccc;
width: 1000px;
height:300px; }
#cell{
display: table-cell;
text-align: center;
vertical-align: middle;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="cell">
<div class="content">未知宽高的元素水平垂直居中</div>
</div>
</div>
</body>
</html>

CSS水平垂直居中总结

2、跟上面提到的多个块状元素水平居中的用法差不多,这里用到弹性盒子是要注意浏览器的兼容性;(这里被居中元素的宽度由其里面的内容决定)

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>未知宽高的元素水平垂直居中</title>
<style>
body{background: #000;font-size: 24px;}
#container{
margin:30px auto;
background: #ccc;
width: 1000px;
height:300px;
display: -webkit-box;
-webkit-box-pack:center;
}
#container .box1{
background: red;
}
#container .box2{
background: green;
}
#container .box3{
background: yellow;
}
</style>
</head>
<body>
<div id="container">
<div class="box1">未知宽高的元素水平垂直居中</div>
<div class="box2">未知宽高的元素水平垂直居中</div>
<div class="box3">未知宽高的元素水平垂直居中</div>
</div>
</body>
</html>

CSS水平垂直居中总结

上一篇:ArcGIS API for JavaScript 4.2学习笔记[29] 热点(密度)分析——以报警频率为例【使用Geoprocessor类】


下一篇:vi命令