元素垂直水平居中

   元素居中是一个老生常谈的问题了，这一次就好好的做一个总结吧：行内元素、块级元素、定宽定高不定宽不定高元素之间等等，其垂直水平居中

文章目录

行内元素水平居中垂直居中应用案例块级元素定宽元素水平居中定高元素垂直居中定宽高水平垂直居中不定宽高垂直居中所以： 重点来了更多精彩
  先从简单的入手吧~~

行内元素

水平居中

如果被设置元素为文本text、图片img、按钮button等等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。

情景如下：

<style>.txtCenter {text-align: center;}
</style><div class="txtCenter">文本：我想要在父容器中水平居中显示。</div>
<div class="txtCenter"><img src="img-blog.csdnimg./2019120709030360.png" alt="" srcset="">
</div>

显示效果如下：

垂直居中

情景如下：

<div>text
</div>

方法有两种：

  /* 行内元素 垂直水平居中1：  `height + line-height`：两者配合使用，垂直方向居中 */height: 0.5rem;line-height: 0.5rem; /* line-height 和 height 一样 */text-align: center; /*水平居中*/

 /* 行内元素 垂直水平居中2： flex布局 */display: flex; /*父元素设置flex属性*/justify-content: center;/*水平主轴居中*/align-items: center;/*垂直交叉轴居中*/

justify-content（在父元素设置）设置弹性盒子元素在主轴（横轴）的对齐方式。
align-items, align-self 设置弹性盒子元素在垂直方向上（纵轴）的对齐方式

应用案例

  文本和图片位于同一行会出现什么效果呢？

<div><span>好好学习，天天向上，我好胖啊</span><img src="img-blog.csdnimg./2019120709030360.png" alt="" srcset="">
</div>

效果如下：

那么该如何解决呢？

方法1： 通过设置父元素table，子元素table-cell和vertical-align 、vertical-align:middle的意思是把元素放在父元素的中部

div{display: table;
}
span{display: table-cell;vertical-align: middle;
}

方法2：

div{line-height: 228px; /*视情况而定*/
}
img{vertical-align: middle;
}
span{vertical-align: middle;
}

方法三：位于段落中的图片

<style type="text/css">
img.top {vertical-align:middle
<p>
好好学习，天天向上，我好胖啊
<img class="top" border="0" src="img-blog.csdnimg./2019120709030360.png" />
位于段落中的图像。</p> 

方法四： flex布局 flex布局是万能的

效果显示：
方案三效果显示：

块级元素

定宽元素水平居中

margin: 0 auto（宽度必须给值）采用绝对定位（定高元素垂直居中亦可采用此方法）所以可谓是定宽定高元素万能居中方法，但是前提是必须要知道子元素的宽高display为-webkit-box 设置水平主轴上的元素居中，垂直交叉轴上的元素居中flex布局(其实flex布局多用于不定宽元素的水平垂直居中)

方案一：

/*块级元素定宽水平居中1： margin: 0 auto*/
.parent{background-color: #f8f8f8;min-width: 960px;height: 480px;
}
/*此时.son 还没有定高*/
.son {width: 960px;margin: 0 auto; //宽度必须给值padding: 12px 0;background-color: #b8b0b0;
}

方案二：

/*块级元素定宽水平居中2：采用绝对定位*/
.parent{background-color: #f8f8f8;height: 480px;min-width: 960px;position: relative;
}
/*此时.son 还没有定高*/
.son {width: 960px;min-width: 960px;position: absolute;left: 50%;margin-left: -480px; /*负值+宽的一半+单位*/padding: 12px 0;background-color: #b8b0b0;
}

/*块级元素定宽水平居中3： flex布局*/
/*见下方块级元素水平垂直居中*/

<div class="parent"><div class="son">我是定宽块状元素，我要水平居中显示。</div>
</div>

显示效果如下：

定高元素垂直居中

采用绝对定位flex布局display: table-cell;

方案一：

/*块级元素定高垂直居中1： 绝对定位*/
/*方法相同于定宽元素水平居中绝对定位*/
/*负值+高的一半+单位*/
.parent{background-color: #f8f8f8;height: 480px;min-width: 960px;position: relative;
}
/*此时.son 已定高*/
.son {width: 960px;min-width: 960px;height: 96px;position: absolute;top: 50%;margin-top: -48px;background-color: #b8b0b0;
}

显示效果如下：

定宽高水平垂直居中

flex布局绝对定位其实原理是同上面的

方案一：

.parent{background-color: #f8f8f8;height: 480px;min-width: 960px;position: relative;
}
.son {width: 960px;min-width: 960px;height: 96px;position: absolute;left: 50%;margin-left: -480px;top: 50%;margin-top: -48px;background-color: #b8b0b0;
}

方案二：

.parent {background-color: #f8f8f8;min-width: 960px;height: 480px;display: flex;/*父元素设置flex属性*/justify-content: center;/*水平主轴居中*/align-items: center;/*垂直交叉轴居中*/
}.son {width: 960px;height: 96px;min-width: 960px;padding: 12px 0;background-color: #b8b0b0;
}

下面的我就把水平垂直居中写到一块了哈

不定宽高垂直居中

使用 display:table-cell 方法；借助translate的transform属性flex布局

方案一：

.wrap {display:table-cell; text-align:center;vertical-align:middle;
}
.wrap .content {display:inline-block;vertical-align:middle;
}

方案二：

/*借助translate的transform属性*/
.wrap {position: relative;
}
.wrap .content {position: absolute;top: 50%;left: 50%;transform: translate(-50%，-50%);
}

方案三：

/*flex布局*/
.wrap{display: flex;flex-direction: column;justify-content: center;
}

所以： 重点来了

一、定宽高元素在屏幕窗口水平垂直都居中，方法如下：

元素{position: fixed;left: 50%;top: 50%;/*负值+宽的一半+单位*/margin-left: -width/2+px;/*负值+高的一半+单位*/margin-top: -height/2+px;
}

二、 不定宽高元素在屏幕窗口水平垂直都居中，方法如下：

元素{position: fixed;left: 0;top: 0;right: 0;bottom: 0;margin: 0 auto;
}

三、不定宽高元素在父元素中水平垂直都居中，方法如下：
方案一：

父元素{position: relative;
}
子元素{position: absolute;left: 0;top: 0;right: 0;bottom: 0;margin: auto;
}

方案二：

父元素{display: table-cell;text-align: center;vertical-align: middle;
}
/*注:display:table-cell;是将元素转化为表格单元格形式*/

方案三：flex布局

四、定宽高元素在父元素中水平垂直都居中，方法如下：

父元素{position: relative;
}
子元素{position: absolute;left: 50%;top: 50%;margin-left: -width/2+px;margin-top: -height/2+px;
}

方案二：flex布局

应用案例：

   案例是这样的，一个外层div,高宽是固定的，但是里面内容不是固定的。很多朋友的做法是头部加一个padding或者margin，这样，里面内容显得貌似是居中了，但是假如内容变化，这样头部的固定padding或者margin，始终不变。造成了垂直方向不会居中！大家思考吧~~~

所以居中方式有哪些呢？

一、定位居中
二、定位 + 百分比 + margin值 居中
三、定位 + 百分比 + transform:translate 居中
四、弹性盒居中
五、伪元素（行内块方法）居中
六、display： table

大家自己多多总结！！

更多精彩

  同步博客请移 by.wlgzs.club:8082/articles/2019/12/08/1575764246137.html