css水平垂直居中各种方法实现方式

不定宽高水平垂直居中？

面试题回答方式：

通过display：flex；justify-content:center; align-items:center;就可以让子元素不定宽高水平垂直居中
也可以父display：flex；，子设置一个margin：auto；
通过css3，给父元素设置相对定位，给子元素设置绝对定位，left：50% top：50% 通过transform：translate(-50%，-50%)拉回自身的宽和高的一半。
通过给父元素设置display：table-cell; vertical-align：middle text-align：center 给子元素设置vertical-align：middle text-align：center。就可以让子元素不定宽高水平垂直居中了。

文字在垂直和水平方向重叠的两个属性分别是什么？

垂直方向：line-height。设置成比字体高度还小就可以让两行重叠
水平方向：letter-spacing。设置为负值即可实现重叠。

如何居中div

具体实现方式：

水平居中方法1

给 div 设置一个宽度，然后添加 margin:0 auto; 属性

div{width: 200px;margin: 0 auto;}

水平居中方法2

利用 text-align:center 实现.container{background: rgba(0, 0, 0, .5);text-align: center:font-size: 0;}.box{display: inline-block;width: 500px;height: 400px;background-color: pink;}

让绝对定位的div居中

div{positionn: absolute;width: 300px;height: 300px;margin: auto;top: 0;left: 0;bottom: 0;right: 0;background-color: pink; /* 方便看效果 */}

水平垂直居中方法1

/* 确定容器的宽高，宽500高300 */div{position: absolute;width:500px;height: 300px;top: 50%;left: 50%;margin: -150px 0 0 -250px;background-color: pink;}

水平垂直居中方法2

/* 未知容器宽高，利用 transform 属性 */div{position: absolute;width: 500px;height: 300px;top: 50%;left: 50%;transform: translate(-50%, -50%);background-color: pink;}

水平垂直居中方法3

/* 利用 flex 布局实际使用时应考虑兼容性 */.container{display: flex;align-items: center; /* 垂直居中 */justify-content: center; /* 水平居中 */}.container div{width: 100px;height: 100px;background-color: pink;}

为什么margin: 0 auto会让div居中

margin 可以有4个值，分别对应影响的方向是上，右，下，左， 2个值的时候，对应第一个值是控制上下距离，第二个值是控制左右，所以magrgin：0 auto，就是上下距离为0，auto是自适应，这里指的是左右两个方向的距离一样，也就是说，不论你的宽度怎么变化，都是两个方向距离一样，形成居中。

注意：

要给居中元素一个宽度，否则无效

该元素不可以浮动，否则无效

css水平垂直居中各种方法实现方式相关推荐

CSS水平垂直居中的五种方式
CSS水平垂直居中的几种方式 absolute and -margin 需要设置盒子的宽度和高度 .father{border:1px solid red;width: 80vh;height: 90 ...
css水平垂直居中四种常用方式
css水平垂直居中第一种:flex布局水平垂直居中思路: 给父盒子display属性设置flex值,然后使用justify-content与align-item属性进行居中. 参考:阮一峰的fle ...
CSS水平垂直居中常见方法总结(转）
文章目录一.简介二.元素水平居中三.元素水平垂直居中 3.1 position 元素已知宽度 3.2 position transform 元素未知宽度 3.3 flex布局 3.4 table ...
CSS水平垂直居中常见方法总结
说明:本篇文章只是总结一些方法,例子用到的各个元素属性不做解释,详情请看MDN文档,非常的详尽,例子在chrome浏览器下完全好使,IE这个渣渣附上链接:https://developer.mozi ...
CSS实现水平垂直居中的方法总结
在CSS-trick 上面有一篇很棒的博文介绍CSS中的水平垂直居中戳这里. 在这里我强烈推荐这篇文章的原因是:整篇文章的逻辑结构非常清晰.我之前也看过不少CSS实现垂直居中相关的博客,很多博客的总 ...
css居中怎么移动,移动端css水平垂直居中
水平垂直居中 1.margin 负值调整偏移实现兼容性: 当前流行的使用方法. .box{ width: 100%; height: 100%; } .content{ position: abso ...
html 水平垂直居中,css水平垂直居中有几种实现方式？
项目中经常碰到需要实现水平垂直居中的样式.下面就总结几种常用的方法 css水平垂直居中有几种实现方式? 1.水平对齐+行高 [思路一]text-align + line-height实现单行文本水平垂 ...
css实现文字或者div盒子水平垂直居中的方法
实现水平垂直居中的方法文本(文字)内容属于行内元素行内元素水平垂直居中方法方式一: 设置文字外层的盒子 text-align:center /*水平居中*/ height = 100px; /* ...
【面试题】CSS 中几种最常用的水平垂直居中的方法
目录 CSS 中几种最常用的水平垂直居中的方法一.使用 margin:auto 二.使用 position:absolute 三.使用弹性布局四.文本水平对齐和行高五.使用网格布局 CSS 中几 ...