Summary of HTML horizontal and vertical centering issues

I have encountered many centering problems recently, so I took some time to summarize them and put them here so that it will be easy to find them later.

1. Center text

Copy code

The code is as follows:

<div class="wrap">
I'm in the middle...
</div>
.. height+line-height+text-center (can only center a single line)
.wrap{
width:px;
height:px;
border:px solid red;
text-align: center;
line-height: px;
}

ps:text-align:center only centers the inline elements below the element
1.2display:table-cell (multiple rows with fixed height centered)

Copy code

The code is as follows:

.wrap{
width:px;
height:px;
border:px solid red;
text-align: center;
display:table-cell;
vertical-align: middle;
}

display:table-cell: does not work in ie67, it is best to use it with display:table;
Under ie67: (I won't use it anymore, but I'll put it here)
Method 1: (The em tag height is the same as the parent, so span and em centering is equivalent to span centering the parent)

Copy code

The code is as follows:

<div class="wrap">
<span>
I'm in the middle... I'm in the middle... I'm in the middle...
</span>
<em>
</div>
.wrap{
width:px;
height:px;
border:px solid red;
text-align: center;
}
.wrap span{
vertical-align: middle;
display:inline-block;
width:px;
}
.wrap em{
height:%;
vertical-align: middle;
display:inline-block;
}

Method 2: (By adding an absolutely positioned parent tag to the child element, and then using relative positioning of the child element to center it horizontally and vertically)

Copy code

The code is as follows:

<div class="wrap">
<span class="span">
<span class="span">I'm in the middle... I'm in the middle... I'm in the middle... I'm in the middle...</span>
</span>
</div>
.wrap{
width:px;
height:px;
border:px solid red;
display:table;
position:relative;
overflow: hidden;
}
.wrap .span{
display:table-cell;
vertical-align: middle;
text-align: center;
*position:absolute;
top:%;
left:%;
}
.wrap .span{
*position:relative;
top:-%;
left:-%;
}

1.3padding (internal padding, needless to say)

Copy code

The code is as follows:

.wrap{
width:px;
border:px solid red;
padding:px;
}

2. Centering Elements

Copy code

The code is as follows:

2.1position:absolute+margin negative value (width and height are required to calculate margin)

Copy code

The code is as follows:

.wrap{
width:px;
height:px;
position:absolute;
top:%;
left:%;
margin-top:-px;
margin-left:-px;
border:px solid red;
}
.wrap span{
width:px;
height:px;
background:red;
position: absolute;
top:%;
left:%;
margin-top:-px;
margin-left:-px;
}

ps: CSS realizes DIV horizontal centering and vertical centering

Copy code

The code is as follows:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Vertical centering online demonstration DIVCSS5</title>
<style>
#main {
position: absolute;
width:400px;
height:200px;
left:50%;
top:50%;
margin-left:-200px;
margin-top:-100px;
border:1px solid #00F
}
/*css comment: For the convenience of screenshots, wrap the CSS code*/
</style>
</head>
<body>
<div id="main">DIV horizontal center and vertical center<a href="http://www.divcss5.com/">DIVCSS5</a></div>
</body>
</html>

Introduction to the principles of horizontal and vertical centering <br />Absolute positioning position:absolute is used here, and left and top are used to set the object's distance from the top and left to 50%. However, if it is set to 50%, the box is actually not centered, so margin-left:-200px;margin-top:-100px; are set. Here is a trick: the value of margin-left is half of the width, and the value of margin-top is also half of the object height. At the same time, they are set to negative, so that horizontal and vertical centering is achieved.

<<: CSS to achieve the image hovering mouse folding effect

>>: Docker installation and configuration steps for Redis image

Implementation steps for enabling docker remote service link on cloud centos

Summary of HTML horizontal and vertical centering issues

Implementation steps for enabling docker remote service link on cloud centos

Summary of JavaScript Timer Types

A brief discussion on HTML doctype and encoding

How to match the size of text in web design: small text, big experience

Docker generates images through containers and submits DockerCommit in detail

Detailed explanation of using pt-heartbeat to monitor MySQL replication delay

Apache Calcite code for dialect conversion

Layui table selects the radio button of the specified row and scrolls to the implementation code of the row

Solution to the problem that the InnoDB engine is disabled when MySQL is started

How to use not in to optimize MySql

Recommend

Advantages and disadvantages of MySQL indexes and guidelines for creating indexes

HTML adaptive table method

Detailed explanation of the principle of distributed locks and three implementation methods

WeChat applet implements a simple calculator

How to configure nginx to return text or json

How to change the MySQL database directory location under Linux (CentOS) system

Vue+Openlayer uses modify to modify the complete code of the element

Solution to the problem of flash back after entering the password in MySQL database

How to configure MySQL master-slave replication under Windows

Example code for implementing ellipse trajectory rotation using CSS3

Detailed explanation of MySQL from getting started to giving up - installation

The background color or image inside the div container grows as it grows

15 lines of CSS code can cause Apple devices to crash, and the latest iOS 12 is not immune

How to use async and await in JS

Even a novice can understand the difference between typeof and instanceof in js