元素垂直&水平居中

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

  先从简单的入手吧~~

行内元素

水平居中

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

情景如下：

<style>
	.txtCenter {
		text-align: center;
	}
</style>

<div class="txtCenter">文本：我想要在父容器中水平居中显示。</div>
<div class="txtCenter">
	<img src="https://img-blog.csdnimg.cn/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="https://img-blog.csdnimg.cn/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="https://img-blog.csdnimg.cn/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

大家自己多多总结！！

更多精彩

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