• 网站首页
• 网站建设
• 短视频
• 网站推广
• 网站模板
• 客户案例
• 资讯动态
• 关于我们

CSS margin:auto做垂直居中方法_CSS学习

当前位置：网站建设 > 技术支持

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

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

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

虽然垂直居中，但水平居中失败！！！

<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居中：

<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（块状元素）》

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

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

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

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

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

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

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

9、《垂直居中（上下左右都居中）任何元素CSS代码》

版权说明：
本网站凡注明“广州京杭 原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。