水平垂直居中
Learn more here
水平居中
1.行内元素(inline element), 给其父元素设置 text-align:center (适用行内元素)
inline element
也叫内联元素、内嵌元素等;行内元素一般都是基于语义级(semantic)的基本元素,只能容纳文本或其他内联元素,常见内联元素 “a”。比如 SPAN 元素,IFRAME元素和元素样式的display : inline的都是行内元素。
复制代码
2.块级元素(block element), 该元素设置 margin:0 auto即可.只有块级元素才生效(让整个块元素居中
)
margin 0 auto与text-align:center的区别
text-align:center设置为文本或img标签等一些内联对象(或与之类似的元素)的居中。margin:0 auto是设置块元素(或与之类似的元素)的居中。
复制代码
图片的水平居中
我们设置图片标签img {margin:0 auto;} ,我们就犯了一个小错误,img类于内联对象,不可以设置图片img标签的margin属性,如果你一定想要设置,那么首先要将它的属性转变为块元素,如下面的代码:
img {
display:block;
margin:0 auto;
}
复制代码
3.在一个盒子里面,让一个有固定宽高的盒子实现水平居中:
display: block; /* 转化成为块级元素 */
magin: auto;
复制代码
4.绝对定位元素的居中实现
.element {
width: 600px; height: 400px;
position: absolute; left: 50%; top: 50%;
margin-top: -200px; /* 高度的一半 */
margin-left: -300px; /* 宽度的一半 */
}
复制代码
上面的写法需要严格知道盒子的宽高(局限性),所以有了下面的写法(手机web开发可忽略,E10+以及其他现代浏览器才支持)
.element {
width: 600px; height: 400px;
position: absolute; left: 50%; top: 50%;
transform: translate(-50%, -50%); /* 50%为自身尺寸的一半 */
}
复制代码
总结下 ,margin:auto实现绝对定位元素的居中(水平垂直居中)
.element {
width: 600px; height: 400px;
position: absolute;
left: 0; top: 0; right: 0; bottom: 0;
margin: auto; /* 有了这个就自动居中了 */
}
复制代码
垂直居中
1.若元素是单行文本, 则可设置 line-height 等于父元素高度
.element {
line-height: 10px;
height:10px;
}
复制代码
2.若元素是行内块级
元素(行内元素的一种)
.element {
height:10px;
line-height:10px;
display: inline-block;
vertical-align: middle;
}
复制代码
3.块级元素(元素高度固定)
.element {
width: 600px; height: 400px;
position: absolute;
left: 0; top: 0; right: 0; bottom: 0;
margin: auto; /* 有了这个就自动居中了 */
}
复制代码
4.很普通的一种垂直居中
.parent::after, .son{
display:inline-block;
vertical-align:middle;
}
.parent::after{
content:'';
height:100%;
}
复制代码
flex弹性布局实现水平垂直居中
1.实现
用flex布局的水平垂直居中特别方便,想要进一步了解Flex弹性布局请参考Flex 布局教程:语法篇和 Flex 布局教程:实例篇
flex的居中
.element {
.display: flex;
align-items:center; /* 垂直方向上的对齐方式; */
justify-content:center; /* 水平方向上的对齐方式 */
}
复制代码
2.注意点
align-items:center;(垂直)
和justify-content:center;(水平)
不是固定不变的,根据flex布局的主轴方向而定(默认水平方向)
,主轴方向为垂直,原先的水平居中属性会实现一个垂直居中(注意点)
。
关注公众号,有更多惊喜->