水平垂直居中方案
source link: https://www.clloz.com/programming/front-end/css/2020/10/05/center-layout/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
前言
本文总结一些水平和垂直居中的方案。
水平居中
行内元素
行内元素的水平居中设置父元素的 text-aling: center
即可。元素的 display
可以是 inline
, inline-block
, inline-table
和 inline-flex
。
<style> .wrap { text-align: center; margin-bottom: 30px; } .wrap > div { height: 200px; width: 200px; background-color: lightblue; } </style> <div class="wrap">this is a text.</div> <div class="wrap"> <div class="ib" style="display: inline-block"></div> </div> <div class="wrap"> <div class="it" style="display: inline-table"></div> </div> <div class="wrap"> <div class="if" style="display: inline-flex"></div> </div>
块元素
使用 margin: 0 auto
。 margin: 0 auto
之所以能够进行居中,是在 CSS2.2
中 进行了规定的。当元素的宽度不为 auto
并且 margin-left
和 margin-right
都为 auto
的时候,元素将在水平方向上居中。
<style> .center { height: 200px; width: 200px; margin: 0 auto; background-color: lightblue; } </style> <div class="center"></div>
多个元素
实现多个元素的水平居中比较常用的方法就是 display: inline-block
配合 text-align: center
来实现。
水平垂直居中
这里介绍的几种垂直居中的方法都可以应用到水平方向上,所以就放到一起来说
绝对定位 + 负 margin
在知道元素宽高的情况下可以利用这一方法。
<style> .center { position: absolute; top: 50%; left: 50%; width: 200px; height: 200px; margin: -100px 0 0 -100px; background-color: lightblue; } </style> <div class="center"></div>
绝对定位 + calc
必须确定居中元素的宽高。
<style> .center { position: absolute; top: calc(50% - 100px); left: calc(50% - 100px); height: 200px; width: 200px; background-color: lightblue; } </style> <div class="center"></div>
绝对定位 + margin
元素必须设置宽高,否则元素的宽高都会是 100%
,不过宽高可以设置百分比而不一定非要像素。
<style> .center { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 200px; height: 200px; margin: auto; background-color: lightblue; } </style> <div class="center"></div>
绝对定位 + transform
这个方法和 绝对定位 + 负margin
类似,但是我们可以不用固定宽高,因为 transform
支持百分比。
<style> .center { position: absolute; top: 50%; left: 50%; width: 200px; height: 200px; transform: translate(-50%, -50%); background-color: lightblue; } </style> <div class="center"></div>
table-cell
将父元素的 display
设为 table-cell
,然后利用 text-align
和 vertical-align
来实现元素的居中。不过要居中的元素需要是行内级元素。如果想相对于视口居中,可以在外面再套一层 display: table;
。
<style> .container { display: table; width: 100%; height: 500px; } .wrap { display: table-cell; height: 500px; width: 500px; border: 1px solid black; text-align: center; vertical-align: middle; } .center { display: inline-block; width: 200px; height: 200px; background-color: lightblue; } </style> <div class="container"> <div class="wrap"> <div class="center"></div> </div> </div>
flex布局
<style> .container { display: flex; justify-content: center; align-items: center; height: 200px; border: 1px solid; } .center { height: 100px; width: 100px; background-color: lightblue; } </style> <div class="container"> <div class="center"></div> </div>
::after 伪元素和 vertical-align
可以利用撑满父元素的 ::after
伪元素和 vertical-align
实现行内元素的居中(不用伪元素,用 line-height
同样也可以实现,根据需求选择)
<style> .wrap { width: 100%; height: 600px; /* line-height: 600px; */ text-align: center; border: 1px solid; font-size: 0; } .wrap::after { content: ''; display: inline-block; height: 100%; width: 1px; background-color: red; vertical-align: middle; } .center { display: inline-block; height: 200px; width: 200px; vertical-align: middle; background-color: lightblue; } </style> <div class="wrap"> <div class="center"></div> </div>
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK