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

How to share Flash pages through verification methods in website standards

1. Embed is illegal The <embed> tag is a pri...

MySQL GROUP_CONCAT limitation solution

effect: The GROUP_CONCAT function can concatenate...

MySQL database basic syntax and operation

MySQL database basic syntax DDL Operations Create...

Detailed explanation of the use of ElementUI in Vue

Login + sessionStorage Effect display After a suc...

How to view Docker container application logs

docker attach command docker attach [options] 容器w...

Linux View File System Type Example Method

How to check the file system type of a partition ...

Summary of methods to clear cache in Linux system

1) Introduction to cache mechanism In the Linux s...

Perfect solution to the problem of MySQL shutting down immediately after startup (caused by ibdata1 file corruption)

The mysql on a server in the computer room had be...

JavaScript to implement simple tab bar switching content bar

This article shares the specific code of JavaScri...

How to install Docker on Windows Server 2016

Recently Microsoft released Windows Server 2016, ...

Detailed explanation of how to deploy SpringBoot in docker and replace jar packages

Table of contents Project Directory Dockerfile Fi...

How to insert Emoji expressions into MySQL

Preface Today, when I was designing a feedback fo...

Detailed explanation of the installation process of Jenkins on CentOS 7

Install Jenkins via Yum 1. Installation # yum sou...

React + Threejs + Swiper complete code to achieve panoramic effect

Let’s take a look at the panoramic view effect: D...

In-depth understanding of umask in new linux file permission settings

Preface The origin is a question 1: If your umask...