CSS 布局 - 水平 & 垂直对齐,全面的水平垂直居中方案：

一、水平垂直居中对齐

居中效果主要用途在于

① 元素框内的文本，图像居中，使用text-align，vertical-align，line-height等达到效果

② 布局时的div框水平垂直居中，使用margin，position等达到效果，

二、文本水平垂直居中，

1、文本水平居中

代码：

text-align：center

  <style>div {width: 500px;height: 300px;border: 1px solid red;}p {width: 400px;height: 50px;border: 1px solid black;text-align: center;}</style>
</head><body><div><p>我是liuxmoo！</p></div>
</body>

结果展示：

p用了text-align：center，可以让文本在p元素框的水平居中位置

当然也可以在父元素中设置text-align：center，这个属性是会继承的，子元素会继承到父元素的效果。

2、文本垂直居中，

文本的垂直居中属性：vertical-align ，这个属性只能用于行内元素、表格单元格table-cell的垂直居中，

用在块级元素并没有效果。

如下代码不能垂直居中：

  <style>div {width: 500px;height: 300px;border: 1px solid red;}p {width: 400px;height: 50px;border: 1px solid black;text-align: center;vertical-align: middle;}</style>
</head><body><div><p>我是liuxmoo！</p></div>
</body>

结果展示：

文本没有在p元素中垂直居中，

那么如何设置垂直居中的呢？

①单行文本使用line-height=height的值来达到垂直居中效果。

②也可以使用display将元素变为【行内元素或者是单元格】来联合使用vertical-align 达到垂直居中

③当然还可以用padding值来修改上下填充来修改，但是这个不现实，不推荐使用！

①单行元素line-height方法垂直居中

  <style>div {width: 500px;height: 300px;border: 1px solid red;}p {width: 400px;height: 50px;border: 1px solid black;text-align: center;line-height: 50px;}</style>
</head><body><div><p>我是liuxmoo！</p></div>
</body>

结果展示：

②可以使用display将元素变为行内元素或者是单元格来联合使用vertical-align ，联合display达到效果

（这个办法单行多行都可以达到效果，但是会改变父元素的padding，因为这个方法为了不影响父元素的padding，还要给父元素重新设置padding值。）

代码如下：

  <style>div {width: 500px;height: 300px;border: 1px solid red;}p {width: 400px;height: 100px;border: 1px solid black;text-align: center;display: table-cell;vertical-align: middle;}</style>
</head><body><div><p>我是liuxmoo！你好呀！你好呀！你好呀！你好呀你好呀！你好呀！你好呀！你好呀！你好呀！</p></div>
</body>

结果展示：

三、布局时的水平垂直居中（设置块级元素框对于父元素的居中对齐），

1、块状元素水平居中，

①元素左右外边距设置为auto（根据浏览器来自适应）。

②元素定位position结合margin

③块状元素的水平居中，子元素使用display：inline-block，与父元素使用text-align：center联合（单块多块均可）

④块状元素的水平居中，子元素使用display：inline-flex，与父元素使用text-align：center联合（单块多块均可）

方法①：元素左右外边距设置为auto。

代码：

  <style>div {width: 100%;height: 300px;border: 1px solid red;text-align: center;}p {width: 80%;height: 100px;border: 1px solid black;margin: 0px auto;}</style>
</head><body><div><p>我是内容，我是内容</p></div>
</body>

结果展示：

方法②元素定位position结合margin

需要给父元素设置相对定位，

代码：

  <style>div {width: 100%;height: 300px;border: 1px solid red;text-align: center;position: relative;}p {width: 80%;height: 100px;border: 1px solid black;position: absolute;left: 50%;margin-left: -40%;}</style>
</head><body><div><p>我是内容，我是内容</p></div>
</body>

结果：

方法③块状元素的水平居中，display：inline-block，与text-align联合

代码如下

  <style>div {width: 100%;height: 300px;border: 1px solid red;text-align: center;}p {width: 40%;height: 100px;border: 1px solid black;display: inline-block;}</style>
</head><body><div><p>我是内容1，我是内容1</p><p>我是内容2，我是内容2</p></div>
</body>

结果展示：

方法④块状元素的水平居中，display：flex，与text-align联合

代码如下

  <style>div {width: 100%;height: 300px;border: 1px solid red;text-align: center;}p {width: 40%;height: 100px;border: 1px solid black;display: inline-flex;}</style>
</head><body><div><p>我是内容1，我是内容1</p><p>我是内容2，我是内容2</p></div>
</body>

结果展示：

2、块状元素垂直居中，

①已知高度height，使用position绝对定位，与margin：负外边距联合

利用绝对定位，将元素的top和left属性都设为50%，再利用margin负边距（值为高的一半），将元素回拉它本身高宽的一半，

实现垂直居中。父元素需要设置position相对定位

②未知高度height，使用position绝对定位，与margin：auto 自适应外边距距联合

利用绝对定位，将元素的四边属性，top，bottom，设置为0 , margin：auto，实现垂直居中。

父元素需要设置position相对定位

③父元素设置

方法①：

代码：

 <style>div {width: 100%;height: 300px;border: 1px solid red;position: relative;}p {width: 40%;height: 100px;border: 1px solid black;position: absolute;top: 50%;margin-top: -50px;}</style>
</head><body><div><p>我是内容1，我是内容1</p></div>
</body>

结果展示：

方法②：

代码：

  <style>div {width: 100%;height: 300px;border: 1px solid red;position: relative;}p {width: 40%;height: 100px;/* 假设我们并不知道高度，这里是为了看效果给出高度 */border: 1px solid black;position: absolute;top: 0;bottom: 0;margin: auto;}</style>
</head><body><div><p>我是内容1，我是内容1</p></div>
</body>

结果展示：

四、元素水平&垂直居中！！！！！

水平垂直都居中是将前面水平居中结合垂直居中方法

① 父级容器设置为display:table-cell，配合text-align:center和vertical-align:middle即可以实现水平垂直居中。

子元素（需要居中的元素）设置为display：inline，或者是display：inline-block，具体根据直接需要而定，

② 父级容器设置为display:table-cell，配合text-align:center和vertical-align:middle即可以实现水平垂直居中。

子元素（需要居中的元素）设置为display：inline-flex，具体根据直接需要而定，

（有兼容性问题，不兼容的浏览器还需要做前锥设置，不使用这个办法）

② 父级容器设置为display:flex，配合text-align:center和justify-content:center即可以实现水平垂直居中。

③已知宽度高度，利用绝对定位，top，left，都设置为50% , 联合margin：负边距（各为宽高一半），实现垂直居中。

父元素需要设置position相对定位

④未知宽度高度，利用绝对定位，将元素的四边属性，top，right，bottom，left，都设置为0 , margin：auto，实现垂直居中。

父元素需要设置position相对定位

⑤未知宽度高度，利用绝对定位，top，left，都设置为50% , 联合css3中的transform：translate（-50%，-50%），实现垂直居中。

父元素需要设置position相对定位【有兼容性问题，只是设置transform：translate（-50%，-50%）达不到效果，还需要做兼容考虑】

方法1：代码如下，结果不展示：

  <style>div {width: 100%;height: 300px;border: 1px solid red;display: table-cell;text-align: center;vertical-align: middle;}p {width: 40%;height: 100px;border: 1px solid black;display: inline-block;}</style>
</head><body><div><p>我是内容1，我是内容1</p></div>
</body>

方法2：代码如下，结果不展示：

  <style>div {width: 100%;height: 300px;border: 1px solid red;display: table-cell;text-align: center;vertical-align: middle;}p {width: 40%;height: 100px;border: 1px solid black;display: inline-flex;}</style>
</head><body><div><p>我是内容1，我是内容1</p></div>
</body>

  <style>div {width: 100%;height: 300px;border: 1px solid red;display: flex;justify-content: center;align-items: center;}p {width: 40%;height: 100px;border: 1px solid black;}</style>
</head><body><div><p>我是内容1，我是内容1</p><p>我是内容2，我是内容2</p></div>
</body>

方法3：代码如下，结果不展示：

  <style>div {width: 100%;height: 300px;border: 1px solid red;position: relative;}p {width: 40%;height: 100px;border: 1px solid black;position: absolute;top: 50%;left: 50%;margin-left: -20%;margin-top: -50px;}</style>
</head><body><div><p>我是内容1，我是内容1</p></div>
</body>

方法4：代码如下，结果不展示：

  <style>div {width: 100%;height: 300px;border: 1px solid red;position: relative;}p {width: 40%;height: 100px;border: 1px solid black;position: absolute;top: 0;right: 0;bottom: 0;left: 0;margin: auto;}</style>
</head><body><div><p>我是内容1，我是内容1</p></div>
</body>

CSS 布局 - 水平 amp;amp; 垂直对齐,全面的水平垂直居中方案相关推荐

前端笔记（9）元素的隐藏与显示，css用户界面样式，vertical-align垂直对齐，溢出文字省略号显示，css精灵技术，过渡，焦点，滑动门，margin负值
css样式表/层叠样式表(7) 元素的隐藏与显示 (1)dispaly显示 (2)visibility可见性 (3)overflow溢出 css用户界面样式鼠标样式cursor 轮廓线outline ...
CSS 实现文字、图片垂直对齐(vertical-align)
垂直对齐在 Firefox 和 IE7 等最新浏览器中,已经不是什么难事,但是IE6下使用 DIV 布局,垂直对齐则依然是个非常令人头痛的问题:虽然 IE 7 已经越来越普及,但是 IE6 依然占了很 ...
CSS实现头像和姓名垂直对齐
vertical-align属性使用场景:经常用于设置图片或者表单(行内块元素)和文字垂直对齐. 需要给行内块元素或行内元素设置该属性,其后的文字才会居中. vertical-align: base ...
【转】数据库水平扩展与垂直扩展
数据库水平扩展与垂直扩展 MySQL数据库水平扩容方案转载于:https://www.cnblogs.com/apeway/p/10870810.html
CSS学习笔记（九）display: inline-block，CSS 布局- 水平和垂直对齐
CSS 布局 - display: inline-block display: inline-block 与 display: inline 相比,主要区别在于 display: inline-blo ...
CSS布局对齐方式--水平居中、垂直居中、水平垂直居中
前言:在网页布局中,经常遇到需要使元素居中对齐的时候,居中对齐的方式有:水平居中.垂直居中和水平垂直居中.这次,借此回顾总结一下,并在此记录下相关内容. 一.水平居中: (1)行内元素的水平居中 ...
CSS布局：设置图片在DIV中上下左右居中(水平和垂直都居中)
CSS布局实例,这个例子相信很实用,让一个图片在Div容器中上下.左右都居中,也就是水平和垂直都居中,有用吧,平时遇到的机率挺高的,下面结合CSS和HTML来实现这个演示,请参见代码: <sty ...
【web前端】CSS高级技巧（精灵图，字体图标，CSS三角，CSS用户界面样式，文字与图片垂直对齐，溢出的文字省略号显示，常见布局技巧，CSS初始化）
使用课程是黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili 目录一.精灵图 1.为什么需要精灵图 2.精灵图( sprit ...
CSS布局之-水平垂直居中
对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法. 另外,文中的css都是用less书写的,如果看不懂less,可以把我给 ...
CSS 系列七高级技巧篇精灵图、字体图标、CSS三角、图片和文字对齐以及bug 、溢出文字省略号、CSS 初始化、常见的布局技巧
--------------------------- 精灵图 --------------------------- 1.1 为什么需要精灵图一个网页中往往会应用很多小的背景图像作为修饰,当网页中 ...

CSS 布局 - 水平 amp;amp; 垂直对齐,全面的水平垂直居中方案

CSS 布局 - 水平 & 垂直对齐,全面的水平垂直居中方案：

CSS 布局 - 水平 amp;amp; 垂直对齐,全面的水平垂直居中方案相关推荐

最新文章

热门文章