csslabel居中布局_CSS居中的⽅法总结
CSS⽔平和垂直居中在开发中经常⽤到，在此加以总结。
⽔平居中⽅法
1.⾏内元素⽔平居中，设置⽗元素的text-align: center。
center
#box {  text-align: center;
}常⽤的⾏内元素有a、abbr、b、br、em、input、label、select、span、strong、sub、sup、textarea等。
css固定定位2.宽度固定的块级元素⽔平居中，设置该元素的margin: 0 auto。
center
#box {  width: 64%;  margin: 0 auto;
}常⽤的块级元素有address、article、audio、blockquote、canvas、div、footer、form、h1、header、hr、ol、output、p、pre、section、table、ul、video等。
3.绝对定位元素⽔平居中，设置⽗元素position: relative，设置该元素left: 0; right: 0; margin: 0 auto;。
center
#box {  position: relative;
}#content {  position: absolute;  left: 0;  right: 0;  margin: 0 auto;
}
4.flex布局⽔平居中，设置⽗元素display: flex; justify-content: center。
center
#box {  display: flex;  justify-content: center;
}
垂直居中⽅法
1.单⾏⽂本垂直居中，设置该元素line-height为⽗元素height⾼度。
center
#content {  height: 2em;  line-height: 2em;
}
2.将⽗元素显⽰为表格display: table-cell，利⽤vertical-align: middle设置垂直居中。
center
#box {  display: table-cell;  vertical-align: middle;
}
3.绝对定位该元素并设置⽗元素positoin: relative，设置该元素top:0; bottom: 0; margin: auto;
center
#box {  position: relative;
}#content {  position: absolute;  top: 0;  bottom: 0;  marigin: auto;
}
4.绝对定位固定⾼度是，设置top: 50%，margin-top值为⾼度值的⼀半。
center
#box {  position: relative;
}#content {  position: absolute;  height: 12em;  top: 50%;  margin-top: 6em;
}
5.flex布局，设置⽗元素display: flex; align-items: center
center
#box {  display: flex;
align-items: center;
}
作者：Adambee08

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。