CSS实现子元素div水平垂直居中的示例

这篇文章主要介绍了CSS实现子元素div水平垂直居中的示例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

div基本布局

css样式

1. 配合定位与margin：auto

父元素加相对定位，子元素加绝对定位

.main{ width: 300px; height: 300px; background-color: red; position: relative; } .center{ width: 100px; height: 100px; background-color: skyblue; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; }

2.利用flex布局，设置水平与竖直方向的内容居中。

.main{ width: 300px; height: 300px; background-color: red; display: flex; justify-content: center; align-items: center; } .center{ width: 100px; height: 100px; background-color: greenyellow; }

3.利用position:absolute与transform

:这里需要记住的是transform中translate使用百分比时相对的是自己的长宽，不是父盒子的。

.main{ width: 300px; height: 300px; background-color: red; position: relative; } .center{ width: 100px; height: 100px; background-color: pink; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); }

4.定位 与负margin配合

只适合子盒子长宽固定的情况

.main{ width: 300px; height: 300px; background-color: red; position: relative; } .center{ width: 100px; height: 100px; background-color: pink; position: absolute; left: 50%; top: 50%; margin-left: -50px; margin-top: -50px; }

5.display:table-cell

display:table-cell；与vertical-align:middle 的作用是让子盒子在数值方向上居中

margin:auto;则让子盒子在水平方向居中，若只想让盒子在某个方向居中，去掉另一个就可以了。

.main{ width: 300px; height: 300px; background-color: red; display: table-cell; vertical-align: middle; } .center{ width: 100px; height: 100px; background-color: #000; margin: auto; }

文章来源：脚本之家，原文链接：https://www.jb51.net/css/743597.html

关于西部数码

成都西维数码科技有限公司成立于2002年，注册资本1000万元，总部坐落于“天府之国”——成都，旗下品牌西部数码 （www.west.cn） ，深耕IDC行业十多年，已拥有北京、广东、郑州、成都、绵阳、香港等中国多个云计算IDC安全数据中心和美国等海外数据中心。我们先后自主研发的虚拟主机、弹性云服务器、西数企业云邮箱等产品都广受用户欢迎。我们始终坚持用户体验至上的价值导向，深入挖掘用户需求，目前，有超过一百万用户通过我们注册并管理了超过一千万个域名，累计有超过50万网站在我们的自主研发的云主机平台上运行，服务的用户有：宝贝回家寻子网、四川大学、链家网（北京）科技有限公司、四川省互联网协会、沱牌集团、谭木匠、中铁二局、四川省中国青年旅行社、富森美家居网上商城等

我们始终坚持“以人为本，客户为尊，永续创新”的核心价值观，抢抓各种发展机遇，不断创新发展理念，不断转变发展方式，不断破解发展难题，随着企业的发展，我们经营的业务也不断发展为以云计算为基础的云主机业务、域名注册、域名交易等其他相关业务，公司从最初只有几个员工发展到如今拥有近二百人的精英团队，并在中国IDC、云计算行业中占有一席之地，位列国内三强。成为拥有多项自主知识产权的国家高新技术企业，ICANN和CNNIC双认证的国际顶级域名注册服务机构，首批获得国家工信部颁发的全国云服务牌照企业之一。