This is the 9th day of my participation in the wenwen Challenge

Center is often used in the process of our development, horizontal center, vertical center, width and height fixed, width and height is not fixed, not the same situation, the implementation method is different, this paper mainly on the various cases of the center to do a complete summary.

Horizontal center

The inline and inline – * class

 .inline-level-center{
      text-align: center;
  }
Copy the code

Note: The center class is written on the parent element

<div class="box inline-level-center"> <span> Inline elements are horizontally centered </span> <div>Copy the code

Block-level elements

.block-level-center{
      margin: 0 auto;
  }
Copy the code

Note: The center type is written on yourself

<div class="box"> <div class="block-box block-level-center"> Block elements horizontally centered </div> <div>Copy the code

Multiple block-level elements

If there are multiple block-level elements, they need to be horizontally and continuously centered

Methods a

Make all block-level elements inline, and center them with inline elements

.inline {
    display: inline-block;
}
.inline-level-center {
    text-align: center;
}
Copy the code
<div class="box inline-level-center"> <div class="small-box1 inline"> </div> <div class="small-box2 inline"> </div> <div class="small-box3 inline"> box3 </div> </div>Copy the code

Way 2

Use an elastic layout to achieve this

.flex-level-center {
    display: flex;
    justify-content: center;
}
Copy the code
<div class="box flex-level-center"> <div class="small-box1"> Box 1</div> <div class="small-box2"> Box 2</div> <div Class ="small-box3"> box3 </div> </div>Copy the code

other

If you have multiple block-level elements and want to center them vertically, you can center them with block-level elements

 .block-level-center{
        margin: 0 auto;
   }

Copy the code
<div class="box"> <div class="small-box1 block-level-center"> Box 1</div> <div class="small-box2 <div class="small-box3 block-level-center"> box-3 </div> <div>Copy the code

Vertical center

The inline and inline – * class

A single

If there is only one line and no newline is required, use line-height

.center-single-row {
    line-height: 200px;
    white-space: nowrap;
}

Copy the code
<div class="box center-single-row"> <span> Inline elements are vertically centered in a single line </span> </div>Copy the code

Note: This method will not work if there is a line break, otherwise it will look like this

Multiple lines

If you want to center multiple rows vertically, you can do this with an elastic layout

  .center-multi-row {
    display: flex;;
    flex-direction: column;
    justify-content: center;
  }
Copy the code
<div class="box center-multi-row"> <span> Inline elements <br/> vertical </span> </div>Copy the code

Block-level elements

Highly known

Let’s say we have a square with a height of 50px and a padding of 0.

 .parent {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    height: 50px;
    margin-top: -25px;
}
Copy the code
<div class="box parent"> <div class="small-box1 child">Copy the code

If the padding is not 0 and the height of the square is 50px, then box-sizing: border-box should be taken into account.

.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    height: 50px;
    padding: 20px;
    margin-top: -45px;
}
Copy the code

Height of the unknown

This can be handled using the Transform property

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
Copy the code
<div class="box parent"> <div class="small-box1 child">Copy the code

Regardless of the height

You can do this using an elastic layout whether you know the height or not

.flex-vertically-center{
    display: flex;
    align-items: center;
}
Copy the code
<div class="box flex-center "> <div class="small-box1 child">Copy the code

Horizontal and vertical center

Fixed width high

Absolutely positioned behind 50/50%, use a negative margin equal to half of the width and height (note the padding, to include the padding)

.parent {
    position: relative;
}

.child {
    background: #99CCFF;
    width: 50px;
    height: 50px;
    padding: 20px;

    position: absolute;
    top: 50%;
    left: 50%;

    margin: -45px 0 0 -45px;
}
Copy the code
<div class="box parent"> <div class="child">Copy the code

Wide high unknown

Use the transform element

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
Copy the code

Flex processing with an elastic layout (no need to worry about width and height)

It can be used regardless of whether the width and height are known

.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}
Copy the code
<div class="small-box1"> box1 </div>Copy the code

Use grid processing (don’t worry about width and height)

It can be used regardless of whether the width and height are known

.parent {
    display: grid;
}
.grid-center {
    margin: auto;
}
Copy the code
<div class="box parent"> <div class="small-box1 grid-center">Copy the code

Read: Centering in CSS: A Complete Guide

Xiao Ke love to finish click a “like” and then go! 🤞 🤞 🤞