css如何让元素水平居中、垂直居中

1.水平居中：

定宽非浮动元素：CSS中用 margin:0 auto 进行水平居中

不定宽的浮动元素：

父元素和子元素同时左浮动，然后父元素相对左移动50%，再然后子元素相对右移动50%，或者子元素相对左移动-50%也就可以了。

绝对定位的元素居中：

首先，创建一个包含需要居中元素的容器，然后将其绝对定位于相对页面左边边缘50%的位置。这样，该容器的左外边距将从页面50%宽度的位置开始算起。

然后，将容器的左外边距值设置为负的容器宽度的一半。这样即可将该容器固定在页面水平方向的中点。

2.垂直居中：

*单行垂直居中，通过设置行高和块元素高度一致实现+overflow:hidden防止内容超出容器或者产生自动换行；

*多行未知高度文字的垂直居中，容器的高度必须是可伸缩时可设定Padding，使上下的padding值相同即可；

*多行文本固定高度的居中，父元素设置display:table；

*不固定高宽div垂直居中， display:table；display: table-cell;

                                       或transform: translateX(x%) translateY(y%);

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

                         可实现子元素水平垂直居中

*利用定位方式运用margin:auto进行水平+垂直居中：父元素position: relative; 

                           子元素position: absolute;top:0;left:0;bottom:0;right:0;width:x%/xpx;height:y%/ypx;margin:auto;

最后

以上就是含蓄汽车为你收集整理的css如何让元素水平居中、垂直居中的全部内容，希望文章能够帮你解决css如何让元素水平居中、垂直居中所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。