6 ways to center CSS boxes!

Hello everyone, I am a 'rookie', and today I will bring you several methods of centering CSS boxes! 

1. The flex layout is centered

One common way is to use flexlayout settings to center.

Use elastic layout ( flex) to achieve horizontal centering, where is justify-contentused to set the alignment of elastic box elements in the main axis (horizontal axis) direction

Set the container to:

• display: flex;Written on the parent element, this defines a flexible container

• justify-content Main axis alignment, the default is the horizontal axis

• align-itemsVertical axis alignment, the default is the vertical axis

Advantages: Simple, convenient, fast, three lines of code.

<style>
.box {
  width: 200px;
  height: 200px;
  border: 1px solid;
  display: flex;
  align-items: center; // 纵轴对齐方式，默认是纵轴 子元素垂直居中
  justify-content: center; //纵轴对齐方式，默认是纵轴
}
.one {
  background: red;
}  
</style>

<div class="box">
  <div class="one">水平垂直居中</div>
</div>

After running:

 2.flex-settings for sub-items

<style>
.box {
  width: 200px;
  height: 200px;
  border: 1px solid;
  display: flex;
}
.child {
  background: red;
  margin: auto; // 水平垂直居中
}  
</style>

<div class="box">
  <div class="child">水平垂直居中</div>
</div>

After running:

 3. Positioning: the son and the father

Use the method of son and father to achieve horizontal and vertical centering. Parent element settings position: relative. child element settings  position: absolute;  left: 50%;  ; top: 50%; transfrom: translate(-50%, -50%)

<style>
.box {
  width: 200px;
  height: 200px;
  border: 1px solid;
  position: relative;
}
.child {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: red;
}  
</style>

<div class="box">
  <div class="child">水平垂直居中</div>
</div>

After running:

 4. tabel-cell achieves vertical centering

The newly added table attribute of css allows us to turn ordinary elements into realistic effects of table elements. Through this feature, horizontal and vertical centering can also be achieved

And the content in the tabel cell is naturally centered vertically, just add a horizontal center attribute

• Use tabel-cell to achieve vertical centering and container settings display: table-cell;;

• vertical-align: middleProperty sets the vertical alignment of an element

• If the child element is a block-level element, use left and right margin:autoto achieve horizontal centering. If it is an inline element, set the containertext-align: center

text-align: centerHorizontal centering of inline elements inside block-level elements can be achieved with . This method is valid for inline elements inline, inline blocks inline-block, inline tables inline-table, and inline-flexhorizontal centering of elements

<style>
.box {
  width: 200px;
  height: 200px;
  border: 1px solid;
  display: table-cell;
  vertical-align: middle;  // 设置元素在垂直方向上的对齐方式
  text-align: center;
}
.child {
  background: red;
  display: inline-block;
}  
</style>

<div class="box">
  <div class="child">水平垂直居中</div>
</div>

After running:

 

5. Add a pseudo-element to the container

This is an uncommon way to achieve vertical centering.

Add a pseudo-element to the container and set it line-heightequal to the height of the container. Set the child element display: inline-block;

This method is suitable for setting horizontal and vertical centering for text

<style>
.box {
  width: 200px;
  height: 200px;
  border: 1px solid;
  text-align: center;
}
.box::after {
  content: "";
  line-height: 200px;
}
.child {
  display: inline-block;
  background: red;
}
  
</style>

<div class="box">
  <div class="child">水平垂直居中</div>
</div>

After running:

6. There is another wonderful method

This wonderful way is similar to the third use positioning,

It's just that you need to set the child element  position: absolute; set a fixed width and height;

top、left、bottom、rightBoth are set to 0; margin is set to auto; vertical and horizontal centering can also be achieved

<style>
.box {
  width: 200px;
  height: 200px;
  border: 1px solid;
  position: relative;
}
.child {
  background: red;
  width: 100px;
  height: 40px;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}  
</style>

<div class="box">
  <div class="child">水平垂直居中</div>
</div>

After running:

 The above are some of our commonly used vertical centering methods, see you next time!!!