Summary of HTML horizontal and vertical centering issues

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:

<div class="wrap">
<span></span>
</div>

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

Recommend

JSONP cross-domain simulation Baidu search

Table of contents 1. What is JSONP 2. JSONP cross...

Using Zabbix to monitor the operation process of Oracle table space

0. Overview Zabbix is ​​an extremely powerful ope...

Detailed process of installing Docker, creating images, loading and running NodeJS programs

System environment: Windows 7 1. Install Docker D...

In-depth understanding of the use of the infer keyword in typescript

Table of contents infer Case: Deepen your underst...

A brief discussion on the $notify points of element

My original intention was to encapsulate the $not...

Solve the problems that need to be paid attention to when configuring Tomcat's maxPostSize attribute

need: In the near future, we will implement the l...

mysql splits a row of data into multiple rows based on commas

Table of contents Separation effect Command line ...

Recommend a cool flashing alarm button

The effect is as follows: The code is as follows ...

How to implement second-level scheduled tasks with Linux Crontab Shell script

1. Write Shell script crontab.sh #!/bin/bash step...

Analysis of the principles of several ways to imitate the magnifying glass effect in CSS3

Why is the title of the article “Imitation Magnif...

Detailed tutorial on installing PHP and Nginx on Centos7

As the application of centos on the server side b...

Detailed explanation of docker's high availability configuration

Docker Compose Docker Compose divides the managed...

js implements table drag options

This article example shares the specific code of ...

Database query which object contains which field method statement

The database queries which object contains which ...

The implementation of Youda's new petite-vue

Table of contents Preface Introduction Live Easy ...