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 master-slave replication delay causes and solutions

Table of contents A brief overview of the replica...

WeChat applet implements video player sending bullet screen

This article shares the specific code for WeChat ...

Detailed tutorial on installing Nginx 1.16.0 under Linux

Because I have been tinkering with Linux recently...

How to handle the loss of parameters when refreshing the page when passing parameters to vue router

Table of contents Overview Method 1: Pass paramet...

Windows Server 2019 Install (Graphical Tutorial)

Windows Server 2019 is the latest server operatin...

Basic knowledge of HTML: a preliminary understanding of web pages

HTML is the abbreviation of Hypertext Markup Langu...

Introduction to CSS style introduction methods and their advantages and disadvantages

Three ways to introduce CSS 1. Inline styles Adva...

How to configure Openbox for Linux desktop (recommended)

This article is part of a special series on the 2...

JS implements Baidu search box

This article example shares the specific code of ...

Specific use of Linux gcc command

01. Command Overview The gcc command uses the C/C...

Solution to 1067 when Mysql starts in Windows

I just started working a few days ago and install...

Docker advanced method of rapid expansion

1. Command method Run the nginx service in the cr...

How to modify the previous command when an input error occurs in the MySQL command prompt

Table of contents Current Issues Solution process...

10 Tips for Mobile App User Interface Design

Tip 1: Stay focused The best mobile apps focus on...

About the use of Vue v-on directive

Table of contents 1. Listening for events 2. Pass...