Several ways to center a box in Web development

Several ways to center a box in Web development

1. Record several methods of centering the box:

1.0, margin fixed width and height centered;

2.0, negative margin centered;

3.0, absolute positioning and centering;

4.0, table-cell is centered;

5.0, flex centered;

6.0, transform center;

7.0, uncertain width and height centered (absolute positioning percentage);

8.0, button is centered.

2. Code demonstration (html uses the same Demo):

html Demo:

<body>
<div id="container">
<div id="box"></div>
</div>
</body>


1.0, margin fixed width and height centered (demo)

This positioning method is purely based on width, height and margin, and is not very flexible.

CSS:

#container {
width: 600px;
height: 500px;
border: 1px solid #000;
margin: auto;
}
#box {
width: 200px;
height: 200px;
margin: 150px 200px;
background-color: #0ff;
}

2.0, negative margin centering (demo)

To use negative margin for centering, you need to know the fixed width and height, which is quite restrictive.

CSS:

#container {
position: relative;
width: 600px;
height: 500px;
border: 1px solid #000;
margin: auto;
}
#box {
position: absolute;
width: 200px;
height: 200px;
left: 50%;
top: 50%;
margin: -100px -100px;
background-color: #0ff;
}

3.0, absolute positioning and centering (demo)

Using absolute positioning to center is a very common method.

CSS:

#container {
position: relative;
width: 600px;
height: 500px;
border: 1px solid #000;
margin: auto;
}
#box {
position: absolute;
width: 200px;
height: 200px;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
background-color: #0ff;
}

4.0, table-cell centering (demo)

Use table-cell to control vertical centering.

CSS:

#container {
display: table-cell;
width: 600px;
height: 500px;
vertical-align: middle;
border: 1px solid #000;
}
#box {
width: 200px;
height: 200px;
margin: 0 auto;
background-color: #0ff;
}

5.0, flex centering (demo)

The new layout method introduced in CSS3 is easier to use. Disadvantages: Incompatible with IE9 and below.

CSS:

#container {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
width: 600px;
height: 500px;
border: 1px solid #000;
margin: auto;
}
#box {
width: 200px;
height: 200px;
background-color: #0ff;
}

6.0, transform center (demo)

This method makes flexible use of the transform attribute in CSS and is relatively novel. The disadvantage is that it is not compatible with IE9.

CSS:

#container {
position: relative;
width: 600px;
height: 600px;
border: 1px solid #000;
margin: auto;
}
#box {
position: relative;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
background-color: #0ff;
}

7.0, Uncertain width and height centered (absolute positioning percentage) (demo)

This type of centering with uncertain width and height is more flexible. Just make sure the percentages of left and right are the same to achieve horizontal centering, and make sure the percentages of top and bottom are the same to achieve vertical centering.

CSS:

#container {
position: relative;
width: 600px;
height: 500px;
border: 1px solid #000;
margin: auto;
}
#box {
position: absolute;
left: 30%;
right: 30%;
top: 25%;
bottom: 25%;
background-color: #0ff;
}

8.0, button centering (demo)

Using button as the outer container, the block elements inside will be automatically centered vertically. You only need to control the horizontal center to achieve the effect.

HTML:

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

CSS:

button {
width: 600px;
height: 500px;
border: 1px solid #000;
}
div {
width: 200px;
height: 200px;
margin: 0 auto;
background-color: #0ff;
}

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

Original link: http://www.cnblogs.com/likar/archive/2016/06/16/5590948.html

<<:  HTML5+CSS3 coding standards

>>:  Use xshell to connect to the Linux server

Recommend

Mysql table creation foreign key error solution

Database Table A: CREATE TABLE task_desc_tab ( id...

How to recover data after accidentally deleting ibdata files in mysql5.7.33

Table of contents 1. Scenario description: 2. Cas...

How to configure jdk environment under Linux

1. Go to the official website to download the jdk...

Detailed explanation of MYSQL large-scale write problem optimization

Abstract: When people talk about MySQL performanc...

Detailed explanation of MySQL index selection and optimization

Table of contents Index Model B+Tree Index select...

How to use JS to check if an element is within the viewport

Preface Share two methods to monitor whether an e...

Detailed explanation of MySQL database (based on Ubuntu 14.0.4 LTS 64 bit)

1. Composition and related concepts of MySQL data...

Basic usage of custom directives in Vue

Table of contents Preface text 1. Global Registra...

Solve the problem that the element DateTimePicker+vue pop-up box only displays hours

Three knowledge points: 1. CSS descendant selecto...

A brief discussion on the differences between several ways of executing .sh files in Ubuntu

Preface Different script execution methods will r...

Solve the problem that vue project cannot carry cookies when started locally

Solve the problem that the vue project can be pac...

How to use Vue cache function

Table of contents Cache function in vue2 Transfor...

Analysis of the configuration process of installing mariadb based on docker

1. Installation Search the mariadb version to be ...

CSS3 speeds up and delays transitions

1. Use the speed control function to control the ...

Steps for customizing node installation to change the default installation path of npm global modules

I installed node to the D drive, and I also neede...