CSS margin:auto做垂直居中方法

老白 3年前 915浏览 0评论

写过前端的都知道,margin:auto很容易就可以做成水平居中,但要做到垂直居中却不行,这是什么道理,难道margin:auto真的做不到垂直居中吗? 错!!!

下面讲解下margin:auto如何做到垂直居中的:

方法一:使用writing-mode:vertical-lr + margin:auto垂直居中

 CSS margin:auto做垂直居中方法 CSS学习 第1张

虽然垂直居中,但水平居中失败!!!

<style>
 .father{height: 200px;width: 100%; writing-mode:vertical-lr;}
 .son{height: 100px; width: 500px; margin: auto;}
</style>
<div class="father">
 <div class="son">
 </div>
</div>

方法二:absolute+margin居中:

CSS margin:auto做垂直居中方法 CSS学习 第2张

<style>
 .father{height: 200px;position: relative;}
 .son{position: absolute;top: 0;bottom: 0;left: 0;right: 0;
      width: 500px;height: 100px; margin: auto;
 }
</style>
<div class="father">
 <div class="son"></div>
</div>

虽然只能支持IE8,但年代不同,所以尽管使用吧,IE8已经被淘汰。

关于其它居中的分享:

1、《a元素居中 position:absolute以及float:left/right都可以使用元素变为display:inline-block(块状元素)》

CSS margin:auto做垂直居中方法 CSS学习 第3张

2、《垂直居中-父元素高度确定的多行文本两个方法table+vertical-align:middle以及display:table-cell+vertical-align:middle

CSS margin:auto做垂直居中方法 CSS学习 第4张

3、《float:left与position:relative,left:50%+left:-50%组合居中方法

CSS margin:auto做垂直居中方法 CSS学习 第5张

4、《text-align:center与display:inline组合块居中,多个行内元素/块状元素居中方法

CSS margin:auto做垂直居中方法 CSS学习 第6张

5、《text-align:center与margin:0 auto居中区别

CSS margin:auto做垂直居中方法 CSS学习 第7张

6、《CSS:左右横向居中—position:relative;left:50%;方法

CSS margin:auto做垂直居中方法 CSS学习 第8张

7、《div垂直居中 css div盒子上下垂直居中

CSS margin:auto做垂直居中方法 CSS学习 第9张

8、《CSS 元素垂直居中的 6种方法

CSS margin:auto做垂直居中方法 CSS学习 第10张

9、《垂直居中(上下左右都居中)任何元素CSS代码

CSS margin:auto做垂直居中方法 CSS学习 第11张

发表评论