居中
-
水平居中
- 行内元素：text-align：center；
- 块级元素：margin： 0 auto；
-
垂直居中
- 在一个高度不固定的元素内，高度是由内容撑开的元素内 使用上下padding 相同可以实现
- 绝对定位加 -margin 或 transform（translate）来实现居中:
- 对于固定宽高的元素，如果想要使它垂直居中，对其进行
position：absolute；然后进行margin-left:-width的一半 ; margin-right:-height的一半这样写是因为定位时以左上角为标准
- 对于固定宽高的元素，如果想要使它垂直居中，对其进行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
html,body {
height:100%;
}
.box {
width:400px;
height:300px;
background-color:#eee;
text-align:center;
/* 以上实现水平居中 */
position:absolute;
top:50%;
left:50%;
margin-top:-150px;
margin-left:-200px;
box-shadow: 0px 0px 3px #000;
}
</style>
</head>
<body>
<div class="box">
<h3>小标题</h3>
<p>这是一个段落</p>
</div>
</body>
</html>
- 或者使用
transform:translate(-50%,-50%);这种方法不限宽高（需要浏览器兼容，css3属性）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
html,body {
height:100%;
}
.box {
background-color:#eee;
text-align:center;
/* 以上实现水平居中 */
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%); /* 这种方法可以不设置宽高 */
box-shadow: 0px 0px 3px #000;
}
</style>
</head>
<body>
<div class="box">
<h3>小标题</h3>
<p>这是一个段落</p>
</div>
</body>
</html>
- vertical-align 实现居中
- 假设在元素内有个一图片，图片需要居中，水平居中使用text-align，垂直居中可以使用
vertical-align:middle;实现 - 在父容器上vertical-align:middle; 在图片上使用vertical-align:middle;然后发现无效，是因为对齐的元素未撑满整个容器，可使用伪元素
box::after {content:''; display: inline-block; height:100%;}即可为元素添加一个伪元素使其成功实现对齐
- 假设在元素内有个一图片，图片需要居中，水平居中使用text-align，垂直居中可以使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.box {
width:300px;
height:200px;
border:1px solid;
text-align:center;
}
.box img {
width:180px;
vertical-align:middle;
}
.box:after {
content:'';
display:inline-block;
height:100%;
vertical-align:middle;
}
</style>
</head>
<body>
<div class="box">
<img src="https://www.baidu.com/img/bd_logo1.png" alt="">
</div>
</body>
</html>
-
table-cell 实现居中 , 将父元素元素设置为
display:table-cell;来实现.box { width:300px; height:200px; display:table-cell; vertical-align:middle; text-align:center; }
此时已经不是一个块级元素，需要设置一个宽高
- flex 实现 ，参见flex简析
.box {
width:200px;
height:200px;
display:flex;
align-items:center; /* 垂直居中 */
justify-content:center;/* 水平居中 */
}
网友评论