Rumah  >  Artikel  >  hujung hadapan web  >  使用CSS实现div水平垂直居中的方法介绍

使用CSS实现div水平垂直居中的方法介绍

高洛峰
高洛峰asal
2017-03-22 15:01:171387semak imbas

实现居中的方案有很多,这里介绍下纯CSS使用absolute配合margin的方案。

1. p宽高固定

width: 400px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -200px;

 margin-top为-(height / 2),margin-left为-(width / 2)。当然也可以不用margin,即top为calc(100% - height) / 2,left为calc(100% - width) / 2,但是建议可以不用calc()就不要用。

2. p宽高不固定

width: 50%;
height: 50%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;

 注意,这适用于宽高需指定的情况,比如使用百分比或者用js动态修改,不然可能被当成100%处理。

 也可以不用margin用translate(),如下:

width: 50%;
height: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);

 3. CSS3不定宽高水平垂直居中

justify-content: center; /* 子元素水平居中 */
align-items: center;     /* 子元素垂直居中 */
display: -webkit-flex;

 在父级元素上添加,即可实现子元素水平垂直居中。

Atas ialah kandungan terperinci 使用CSS实现div水平垂直居中的方法介绍. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn