To achieve horizontal, vertical, horizontal vertical direction is very basic requirements, in this summary of various implementation methods in writing layout we often encounter to achieve horizontal vertical center, I briefly summarize the following:

Horizontally centered

Let’s start with a summary mind map

Is it inline (like text link, etc.)

This can be done by setting the parent element to text-align:center. This works for inline,inline-block,inline-table, and so on.

Is not a block-level element

Margin-left :auto and margin-right:auto can be used to create the center effect, which requires a width (otherwise it becomes the width of the entire line). The code and effects are as follows:

Whether there is more than one block-level element

If you want to center two or more block-level elements horizontally, there are two methods

  • Change it to inline-block and do it with text-align
  • This is done through the context-content of the Flex layout
  • Margin :0 Auto can be used for vertical alignment
<main class="inline-block-center">
  <div>
    I'm an element that is block-like with my siblings and we're centered in a row.
  </div>
  <div>
    I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do.
  </div>
  <div>
    I'm an element that is block-like with my siblings and we're centered in a row.
  </div>
</main>

<main class="flex-center">
  <div>
    I'm an element that is block-like with my siblings and we're centered in a row.
  </div>
  <div>
    I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do.
  </div>
  <div>
    I'm an element that is block-like with my siblings and we're centered in a row.
  </div>
</main>
Copy the code
body {
  background: #f06d06;
  font-size: 80%;
}

main {
  background: white;
  margin: 20px 0;
  padding: 10px;
}

main div {
  background: black;
  color: white;
  padding: 15px;
  max-width: 125px;
  margin: 5px;
}

.inline-block-center {
  text-align: center;
}
.inline-block-center div {
  display: inline-block;
  text-align: left;
}

.flex-center {
  display: flex;
  justify-content: center;
}
Copy the code

The effect is as follows:

Margin :0 Auto also works if the block-level elements are placed vertically.

<main>
  <div>
    I'm an element that is block-like with my siblings and we're centered in a row.
  </div>
  <div>
    I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do.
  </div>
  <div>
    I'm an element that is block-like with my siblings and we're centered in a row.
  </div>
</main>
Copy the code
body {
  background: #f06d06;
  font-size: 80%;
}

main {
  background: white;
  margin: 20px 0;
  padding: 10px;
}

main div {
  background: black;
  margin: 0 auto;
  color: white;
  padding: 15px;
  margin: 5px auto;
}

main div:nth-child(1) {
  width: 200px;
}
main div:nth-child(2) {
  width: 400px;
}
main div:nth-child(3) {
  width: 125px;
}
Copy the code

The effect is as follows:

Center vertically up

Is it an inline element?

Is it a single row element?

Sometimes you can use the padding to center it vertically, so you can use the padding-top,padding-bottom to center it vertically

<main>
  <a href="# 0">We're Centered Bits of Text Copy the code
body {
  background: #f06d06;
  font-size: 80%;
}

main {
  background: white;
  margin: 20px 0;
  padding: 50px;
}

main a {
  background: black;
  color: white;
  padding: 40px 30px;
  text-decoration: none;
}
Copy the code

The effect is as follows:

<main>
  <div>
    I'm a centered line.  Copy the code
body {
  background: #f06d06;
  font-size: 80%;
}

main {
  background: white;
  margin: 20px 0;
  padding: 40px;
}

main div {
  background: black;
  color: white;
  height: 100px;
  line-height: 100px;
  padding: 20px;
  width: 50%;
  white-space: nowrap;
}
Copy the code

The effect is as follows:

Is it multi-line?
<div class="flex-center">
  <p>I'm vertically centered multiple lines of text in a flexbox container.</p>
</div>
Copy the code
body {
  background: #f06d06;
  font-size: 80%;
}

div {
  background: white;
  width: 240px;
  margin: 20px;
}

.flex-center {
  background: black;
  color: white;
  border: 10px solid white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 200px;
  resize: vertical;
  overflow: auto;
}
.flex-center p {
  margin: 0;
  padding: 20px;
}
Copy the code

The effect is as follows;

Is not a block-level element

Do you know the height

If you know the height, you can first use top:50% to make the top margin of the child element 50% relative to the parent element, and then use margin-top:-50px(that is, half the height of the child element) to make the child element vertically centered.

I don’t know the height

If you don’t know the height, you can use transform:translatey(-50%) to move your element half the height vertically.

Can you use flexbox

Horizontal and vertical center

I don’t knowThe width and height of the horizontal and vertical center elements

Here’s an example:

<body>
		<div id="container">
			<div id="box"</div> </div> </body>Copy the code
/* This is implemented by transform, when the width is not known */#container{
				width: 400px;
				height: 400px;
				border: 1px solid red;
				position: relative;
			}
			#box{
				width: 100px;
				border: 1px solid red;
				position: absolute;
				top:50%;
				left: 50%;
                 transform: translate(-50%,-50%);
			}
Copy the code

The key to the above method is the transform, because we don’t know the size of the element we want to center horizontally and vertically, so we can only do it by percentage.

knowThe specific width and height of the horizontally and vertically centered element

<div id="container">
			<div id="box">
			</div>
</div>
Copy the code
/* Implement */ /* via margin#container{
				width: 400px;
				height: 400px;
				border: 1px solid red;
				position: relative;
			}
			#box{width: 100px; height: 100px; border: 1px solid red; position: absolute; top:50%; left: 50%; margin: -50px 0 0 -50px; } * /Copy the code

Because you know the width and height of the element you want to set, you can do this by making the margin move by half the size of the width and height.

Can you use flex-box

<div id="container">
			<div id="box">
				
			</div>
</div>
Copy the code
#container{
				width: 400px;
				height: 400px;
				border: 1px solid red;
				display: flex;
				justify-content: center;
                align-items: center;
			}
			#box{
				width: 100px;
				height: 100px;
				border: 1px solid red;
			}
Copy the code

This can be done by setting context-content,align-items.

Reference: Click the link