One of the most common questions you get asked about CSS during an interview is the center question.

First how to do the horizontal center, then how to do the vertical center, and finally how to do the horizontal vertical center. Next, study one problem at a time

Horizontal centering is based on the positional relationship between two or more elements. It could be a parent and a child, it could be a parent or more children. So what are the possible cases of parent and child elements?

  1. The parent element is an inline element, and the child element is an inline element
  2. The parent element is an inline element, and the child element is a block-level element
  3. The parent element is a block-level element and the child element is an in-line element
  4. The parent element is a block-level element and the child element is a block-level element

In setting the horizontal middle, the width and height of the parent or child elements, and the child elements in single/multiple rows sometimes need to be considered.

Before studying horizontal/vertical center, some special cases that need not be considered are picked out:

The parent element is an in-line element, and the child element is an in-line element (no center problem)

Because of the parent element, the child elements are all inline elements. In addition, the width and height of the inline elements cannot be set (except for replacement elements), so there is no concept of centering.

The parent element is an inline element, and the child element is a block-level element

Since the inline element contains block-level elements, it is possible to add text-align: center to the parent element, but it does not comply with the development specification.

Note: It is not recommended to nest block elements within inline elements, as this not only does not comply with development specifications, but also results in inline elements having their own row.

Horizontal center

The parent element is a block-level element and the child element is an in-line element

Solution 1: Add text-align: center to the parent element.

<! DOCTYPEhtml>
<html lang="en">

<head>
	<style>
		.parent {
			height: 80px;
			margin: 10px;
		}

		.parent1 {
			background-color: white;
			text-align: center;
		}

        .child1 {
            background-color:red;
        }

        .parent2 {
			background-color: blue;
			text-align: center;
            width: 300px;
		}

        .child2 { background-color: red; }
	</style>
</head>

<body>
	<div class="parent parent1">
		<code class="child1">1class ClassName {}</code>
    </div>

    <div class="parent parent2">
        <code class="child2">2class ClassName {}</code>
    </div>
</body>
</html>
Copy the code

Solution 2: Add display: flex to the parent element; Insert-content: center, the height of the child element is set on the child element if you do not want the height to extend.

<! DOCTYPEhtml>
<html lang="en">

<head>
	<style>
		.parent {
			height: 80px;
			margin: 10px;
		}

		.parent1 {
			background-color: white;
			display: flex;
			justify-content: center;
		}

        .child1 {
            background-color:red;
            height: 20px;
        }

        .parent2 {
			background-color: blue;
			display: flex;
			justify-content: center;
            width: 300px;
		}

        .child2 { background-color: red; height: 20px; }
	</style>
</head>

<body>
	<div class="parent parent1">
		<code class="child1">1class ClassName {}</code>
    </div>

    <div class="parent parent2">
        <code class="child2">2class ClassName {}</code>
    </div>
</body>
</html>
Copy the code

The parent element is a block-level element and the child element is a block-level element

Solution 1: Add display: flex to the parent element; Insert-content: center, the height of the child element is set on the child element if you do not want the height to extend.

<! DOCTYPEhtml>
<html lang="en">

<head>
	<style>
		.parent {
			height: 80px;
			margin: 10px;
		}

		.parent1 {
			background-color: white;
			display: flex;
			justify-content: center;
		}

        .child1 {
            background-color:red;
            height: 20px;
        }

        .parent2 {
			background-color: blue;
			display: flex;
			justify-content: center;
            width: 300px;
		}

        .child2 { background-color: red; height: 20px; }
	</style>
</head>

<body>
	<div class="parent parent1">
		<div class="child1">1class ClassName {}</div>
    </div>

    <div class="parent parent2">
        <div class="child2">2class ClassName {}</div>
    </div>
</body>
</html>
Copy the code

Solution 2: Add margin: 0 auto to the child element if it has a fixed width.

<! DOCTYPEhtml>
<html lang="en">

<head>
	<style>
		.parent {
			height: 80px;
			margin: 10px;
		}

		.parent1 {
			background-color: white;
		}

        .child1 {
            background-color:red;
            height: 20px;
            width: 200px;
            margin: 0 auto;
        }

        .parent2 {
			background-color: blue;
		}

        .child2 { background-color: red; height: 20px; width: 30%; margin: 0 auto; }
	</style>
</head>

<body>
	<div class="parent parent1">
		<div class="child1">1class ClassName {}</div>
    </div>

    <div class="parent parent2">
        <div class="child2">2class ClassName {}</div>
    </div>
</body>
</html>
Copy the code

Scheme 3: Use position for positioning

Parent element add position: relative, child element add position: absolute; transform: translateX(-50%); . Transform: translateX(-50%); Instead of being centered, the display starts from the center and moves backwards, as shown in the following example:

<! DOCTYPEhtml>
<html lang="en">

<head>
	<style>
		.parent {
			height: 80px;
			margin: 10px;
		}

		.parent1 {
			background-color: white;
			position: relative;
		}

		.child1 {
			background-color: red;
			width: 30%;
			position: absolute;
			left: 50%;
		}

		.parent2 {
			background-color: blue;
			position: relative;
		}

		.child2 {
			background-color: red;
			width: 30%;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);

		}
	</style>
</head>

<body>
	<div class="parent parent1">
		<div class="child1">1class ClassName {}</div>
	</div>

	<div class="parent parent2">
		<div class="child2">2class ClassName {}</div>
	</div>
</body>

</html>
Copy the code

Vertical center

The parent element is a block-level element and the child element is an in-line element

If the child element is a single row, use: line-height for the parent element’s height and set vertical-align:middel or: dispaly:table-cell for the parent element; vertical-align: midde;

When the child elements are multiple rows: Set the parent element: dispaly:table-cell; vertical-align: midde;

<! DOCTYPEhtml>
<html lang="en">

<head>
	<style>
		.parent {
			height: 80px;
			margin: 10px;
            margin: 10px 0;
		}

		.parent1 {
			background-color: white;
            height: 100px;
		}

		.child1 {
			background-color: red;
            line-height: 100px;
            vertiacl-align: middel;
		}

		.parent2 {
			background-color: yellow;
            width: 100px;
            display: table-cell;
            vertical-align: middle;
		}

		.child2 {
			background-color: red;
		}

        .parent3 {
			background-color: blue;
            height: 100px;
            display: table-cell;
            vertical-align: middle;
		}

		.child3 {
			background-color: red;
		}
	</style>
</head>

<body>
	<div class="parent parent1">
		<span class="child1">A single</span>
	</div>

    <div class="parent parent2">
		<span class="child2">A single</span>
	</div>

	<div class="parent parent3">
		<span class="child3">Multiline line lines more more more more more line more than lines lines more more more more more line more than lines lines more more more more more line more than lines lines more more more more lines lines more more more more lines lines more more more more more</span>
	</div>
</body>

</html>
Copy the code

The parent element is a block-level element and the child element is a block-level element

Solution 1: Position Indicates the position
Scenario 2: Table-cell
Scenario 3: Flex
<! DOCTYPEhtml>
<html lang="en">

<head>
	<style>
		.parent {
			height: 80px;
			margin: 10px;
            margin: 10px 0;
		}

    /* Solution 1: absolute positioning */
		.parent1 {
			background-color: white;
            height: 100px;
            position: relative;
		}

		.child1 {
			background-color: red;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
		}

/* Option 2: table-cell */
		.parent2 {
			background-color: yellow;
            width: 100px;
            display: table-cell;
            vertical-align: middle;
		}

		.child2 {
			background-color: red;
		}
        /* Solution 3: flex */
        .parent3 {
			background-color: blue;
            height: 100px;
            display: flex;
            align-items:center;
		}

		.child3 {
			background-color: red;
		}
	</style>
</head>

<body>
	<div class="parent parent1">
		<div class="child1">Content Content content content content content content content content content content content content content content content content content content content content content content content content content</div>
	</div>

    <div class="parent parent2">
		<div class="child2">Content Content Content Content Inside the content</div>
	</div>

	<div class="parent parent3">
		<div class="child3">Content Content content content content content content content content content content content content content content content content content content content content content content content content content</div>
	</div>
</body>

</html>
Copy the code

Horizontal and vertical center

Vertical horizontal center can be used to combine the above methods, the following are recommended to use some common methods:

Plan a flex

align-items:center;
Copy the code

Solution 2 position Positioning

Plan 3 grid

align-items: center; justify-items:center;

place-items: center;

<! DOCTYPEhtml>
<html lang="en">

<head>
	<style>
		.parent {
			height: 80px;
			margin: 10px;
            margin: 10px 0;
		}

    /* Solution 1: absolute positioning */
		.parent1 {
			background-color: white;
            height: 100px;
            position: relative;
		}

		.child1 {
			background-color: red;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: 50%;
            transform: translateX(-50%);
		}

/* Solution 2: flex */
		.parent2 {
			background-color: yellow;
            display: flex;
            align-items: center;
            justify-content: center;
		}

		.child2 {
			background-color: red;
		}

        /* Scheme 3: gird 1 */
        .parent3 {
			background-color: blue;
            display: grid;
            align-items: center;
            justify-items: center;
            /* or short: place-items: center; * /
		}

		.child3 {
			background-color: red;
		}
	</style>
</head>

<body>
	<div class="parent parent1">
		<div class="child1">Content Content content content content content content content</div>
	</div>

    <div class="parent parent2">
		<div class="child2">Content Content Content Content Inside the content</div>
	</div>

	<div class="parent parent3">
		<div class="child3">Content content content content content content content content content content content content content content</div>
	</div>
</body>

</html>
Copy the code

Reference site: zhuanlan.zhihu.com/p/83553320 blog.csdn.net/weixin_3758…

If the article can help you, I feel very honored. If the article can be you like, that is a great honor.

Personal wechat: iOTzzh Public Account: Front-end micro blog personal website: www.iotzzh.com Github address: github.com/956159241/T…