CSS实现水平垂直居中的方式有哪些

这篇文章主要介绍“CSS实现水平垂直居中的方式有哪些”，在日常操作中，相信很多人在CSS实现水平垂直居中的方式有哪些问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”CSS实现水平垂直居中的方式有哪些”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

成都创新互联是一家专注网站建设、网络营销策划、成都微信小程序、电子商务建设、网络推广、移动互联开发、研究、服务为一体的技术型公司。公司成立十余年以来，已经为千余家成都木屋各业的企业公司提供互联网服务。现在，服务的千余家客户与我们一路同行，见证我们的成长；未来，我们一起分享成功的喜悦。

划重点，这是一道面试必考题，很多面试官都喜欢问这个问题，我就被问过好几次了。

CSS实现水平垂直居中的方式有哪些

要实现上图的效果看似很简单，实则暗藏玄机，本文总结了一下CSS实现水平垂直居中的方式大概有下面这些，本文将逐一介绍一下，我将本文整理成了一个github仓库，欢迎大家star。

仅居中元素定宽高适用

absolute + 负margin
absolute + margin auto
absolute + calc

居中元素不定宽高

absolute + transform
lineheight
writing-mode
table
css-table
flex
grid

absolute + 负margin

为了实现上面的效果先来做些准备工作，假设HTML代码如下，总共两个元素，父元素和子元素

wp是父元素的类名，box是子元素的类名，因为有定宽和不定宽的区别，size用来表示指定宽度，下面是所有效果都要用到的公共代码，主要是设置颜色和宽高

/* 公共代码 */ .wp { border: 1px solid red; width: 300px; height: 300px; } .box { background: green; } .box.size{ width: 100px; height: 100px; }/* 公共代码 */

绝对定位的百分比是相对于父元素的宽高，通过这个特性可以让子元素的居中显示，但绝对定位是基于子元素的左上角，期望的效果是子元素的中心居中显示

为了修正这个问题，可以借助外边距的负值，负的外边距可以让元素向相反方向定位，通过指定子元素的外边距为子元素宽度一半的负值，就可以让子元素居中了，css代码如下

/* 此处引用上面的公共代码 */ /* 此处引用上面的公共代码 */ /* 定位代码 */ .wp { position: relative; } .box { position: absolute;; top: 50%; left: 50%; margin-left: -50px; margin-top: -50px; }

这是我比较常用的方式，这种方式比较好理解，兼容性也很好，缺点是需要知道子元素的宽高

/* 此处引用上面的公共代码 */ /* 此处引用上面的公共代码 */ /* 定位代码 */ .wp { position: relative; } .box { position: absolute;; top: 0; left: 0; right: 0; bottom: 0; margin: auto; }

/* 此处引用上面的公共代码 */ /* 此处引用上面的公共代码 */ /* 定位代码 */ .wp { position: relative; } .box { position: absolute;; top: calc(50% - 50px); left: calc(50% - 50px); }

/* 此处引用上面的公共代码 */ /* 此处引用上面的公共代码 */ /* 定位代码 */ .wp { position: relative; } .box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

/* 此处引用上面的公共代码 */ /* 此处引用上面的公共代码 */ /* 定位代码 */ .wp { line-height: 300px; text-align: center; font-size: 0px; } .box { font-size: 16px; display: inline-block; vertical-align: middle; line-height: initial; text-align: left; /* 修正文字 */ }

/* 此处引用上面的公共代码 */ /* 此处引用上面的公共代码 */ /* 定位代码 */ .wp { writing-mode: vertical-lr; text-align: center; } .wp-inner { writing-mode: horizontal-tb; display: inline-block; text-align: center; width: 100%; } .box { display: inline-block; margin: auto; text-align: left; }

大橙子网站建设，新征程启航

CSS实现水平垂直居中的方式有哪些

absolute + 负margin

absolute + margin auto

absolute + calc

absolute + transform

lineheight

writing-mode

table

css-table

flex

grid

其他资讯