文字垂直居中

  1. div {
  2.   height: 40;
  3.   line-height: 40px;
  4. }

原理

让元素的高度等于文本行高
image.png

文字水平居中

  1. div {
  2.   width: 100px;
  3.   margin: 0 auto;
  4.   text-align: center;
  5. }

块元素水平居中

  1. div {
  2.   width: 100px;
  3.   height: 100px;
  4.   margin: 0 auto;
  5. }

图片与文字垂直居中

  1. img {
  2.   vertical-align: middle;
  3. }
属性值 描述
baseline 与父元素基线对齐
(默认值)
top 顶部对齐
middle 中间对齐
bottom 底部对齐

image.png

  • 只针对行内元素或者行内块元素有效

块元素水平垂直居中

  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4. }
  6. div {
  7.   position: relative;
  8.   width: 300px;
  9.   height: 300px;
  10.   background-color: skyblue;
  11. }
  13. div p{
  14.   position: absolute;
  15.   width: 100px;
  16.   height: 100px;
  17.   background-color: slateblue;
  18.   top: 50%;
  19.   left: 50%;
  20.   transform: translate(-50%, -50%);
  21. }

flex居中

div {
  display: flex;
  justify-content: center;
  align-conetnt: center;
  align-items: center;
}