div tag: implementation of horizontal centering and vertical centering (code attached)

The content of this article is about the implementation of div tags: horizontal centering and vertical centering. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

In front-end development, we often encounter situations where centering is required. There are two situations for centering, one is horizontal centering and the other is vertical centering. Let’s summarize the methods used.

Horizontal centering implementation

margin：0 auto

auto means that the distance between the left and right margins is the same to achieve the horizontal centering effect

Vertical centering implementation

1. One of the most commonly used ways is to implement it based on the offset

<style>
    *{margin: 0;padding: 0;}
    .content{
        position: relative;
        width: 300px;
        height: 300px;
        background-color: #000;
        margin: 300px auto;
    }
    .beat{
        width: 100px;
        height: 100px;
        background-color: #ff0000;
        position: absolute;
        left:50%;
        top:50%;
        margin-top: -50px;
        margin-left: -50px;
    }
</style>

<div>
    <div>
    </div>
</div>

The red square is located in the black square At the center position, the vertical centering effect is achieved.

left and top are set to 50% respectively. The starting point of the red square is at the vertical center position. The effect is as follows:

If you want to vertically center the center point inside the box, you also need to add an offset. The value of margin-top is the red box height/2, and the value of margin-left is the red box width/2. .

2. To vertically center the multi-line text in the p block, you can use table and table-cell to achieve

<style>
    *{margin: 0;padding: 0;}
    .content{
        width: 300px;
        height: 300px;
        background-color: #000;
        margin: 300px auto;
        color: #fff;
        display: table;
        text-align: center;
    }
    .content p{
        display: table-cell;
        height: 100px;
        vertical-align: middle;
    }
</style>

<div>
   <p>垂直居中是布局中十分常见的效果之一垂直居中是布局中十分常见的效果之一垂直居中是布局中十分
       常见的效果之一垂直居中是布局中十分常见的效果之一</p>
</div>

display: table makes the block element a block-level table, display: table-cell; sets the child element to a table cell, vertical-align: middle; makes the table content displayed in the center, and the effect of vertical centering can be achieved

Recommended related articles:

What is the innerHTML attribute? Usage of innerHTML attribute

#What is responsive layout? Implementation of html responsive layout

The above is the detailed content of div tag: implementation of horizontal centering and vertical centering (code attached). For more information, please follow other related articles on the PHP Chinese website!