CSS determines that elements are centered horizontally and vertically

---restore content starts---

First, before we learn how to understand the horizontal and vertical centering of elements through CSS, we need to understand what elements are in the HTML, and what are the categories, because the horizontal vertical centering method of the different categories of elements is completely different, which is of course because of the different properties of different categories of elements. So let's start by understanding the element categories of HTML. first, the HTML element classification

　　　　1) inline (inline) elements:

<a>--Anchor Point

<abbr>--abbreviation

<acronym>--initials (HTML5 not supported, please use <abbr> instead)

<b>--Bold (not recommended)

<bdo>--can override text default orientation

<big>--Large font (HTML5 not supported, use CSS instead)

<br>--line break

<cite>--references

<code>--Computer code

<dfn>--Defining fields

<font>--font settings (not recommended)

<em>--Emphasis (performance also italic, semantic)

<i>--Italic (no semantics)

--Pictures

<input>--input Box

<kbd>--defining keyboard text (deprecated, not recommended)

<label>--Table Labels

<q>--Short Quotes

<s>--underlined (not recommended)

<samp>--Define rebate Computer code

<select>--Project selection (drop-down selection box)

<small>--Small Font text

<span>--commonly used inline containers that define chunks within text

<strike>--Strikethrough (replace with <del>)

<strong>--Bold Emphasis

<sub>--subscript

<sup>--superscript

<textarea>--Multi-line text input box

<tt>--Telex text (HTML5 not supported)

<u>--underline (not recommended)

<var>--Defining variables

　　　2) block (block) elements:

<address>--Address

<blockquote>--Block Reference

<center>--centered on aligning (HTML5 not supported, use CSS instead)

<dir>--directory List

<div>--common block-level elements

<dl>--definition List

<fieldset>--can package a single part of a table (form)

<form>--Interactive Forms

<isindex>-input prompt

<menu>--Menu List

noframes-frames--Optional content (Display this chunk content for browsers that do not support frame)

<noscript>---Optional script content (this chunk content is displayed for browsers that do not support script)

<ol>--sorted list

<p>--Paragraph

<pre>--formatted text (common phrase paste code)

<table>--form

<ul>--Non-sorted list

　　　　3) Variable elements (it is possible to determine the deserved element as a block or inline element, depending on the contextual context)

Applet-java Applet

<button>--button

<del>--Deleting text

<iframe>-inline-frame--Some browsers do not support frame, you can use this tag to make it show

<ins>--inserted text

<map>--Image Block

<object>--object Object

<script>--Client Script

　　　Difference: 1) block-level elements occupy a single row, the width of which automatically fills the width of its parent element, the inline element does not occupy a single row, the adjacent element is arranged on the same line, unless a row does not fit, it automatically wraps to the next line, its width with the content 　

Change and change

2) block-level elements can be set width,height,margin,padding property, inline element settings width,height Invalid, horizontal padding-left,padding-right,margin-left, Margin-right

All produce margin effects, but padding-top,padding-bottom,margin-top,margin-bottom in the vertical direction do not produce margin effects. (The horizontal direction is valid, the vertical direction is invalid)

　　Second, using CSS to achieve horizontal center elements

　　　　1) inline elements (when elements are set as text, pictures, etc.): Set text-align:center for the parent element;

2) Fixed Width block element: Left and right margin set to auto,eg:margin:0 auto;

3) variable width block element

1. Add a table tag (including <tbody>\<tr>\<td>) to the outside of the weightlifting element; set the left and right margin value to auto for table
2. Change the display pseudo-inline-block type of the block element, and then use Text-align:center to achieve the center
3. Set float for the parent element, and then set position:relative and left:50% for the parent element, and the child elements set position:relative and left:-50% to achieve horizontal centering.

　　　　

---restore content ends---

First, before we learn how to understand the horizontal and vertical centering of elements through CSS, we need to understand what elements are in the HTML, and what are the categories, because the horizontal vertical centering method of the different categories of elements is completely different, which is of course because of the different properties of different categories of elements. So let's start by understanding the element categories of HTML. first, the HTML element classification

　　　　1) inline (inline) elements:

<a>--Anchor Point

<abbr>--abbreviation

<acronym>--initials (HTML5 not supported, please use <abbr> instead)

<b>--Bold (not recommended)

<bdo>--can override text default orientation

<big>--Large font (HTML5 not supported, use CSS instead)

<br>--line break

<cite>--references

<code>--Computer code

<dfn>--Defining fields

<font>--font settings (not recommended)

<em>--Emphasis (performance also italic, semantic)

<i>--Italic (no semantics)

--Pictures

<input>--input Box

<kbd>--defining keyboard text (deprecated, not recommended)

<label>--Table Labels

<q>--Short Quotes

<s>--underlined (not recommended)

<samp>--Define rebate Computer code

<select>--Project selection (drop-down selection box)

<small>--Small Font text

<span>--commonly used inline containers that define chunks within text

<strike>--Strikethrough (replace with <del>)

<strong>--Bold Emphasis

<sub>--subscript

<sup>--superscript

<textarea>--Multi-line text input box

<tt>--Telex text (HTML5 not supported)

<u>--underline (not recommended)

<var>--Defining variables

　　　2) block (block) elements:

<address>--Address

<blockquote>--Block Reference

<center>--centered on aligning (HTML5 not supported, use CSS instead)

<dir>--directory List

<div>--common block-level elements

<dl>--definition List

<fieldset>--can package a single part of a table (form)

<form>--Interactive Forms

<isindex>-input prompt

<menu>--Menu List

noframes-frames--Optional content (Display this chunk content for browsers that do not support frame)

<noscript>---Optional script content (this chunk content is displayed for browsers that do not support script)

<ol>--sorted list

<p>--Paragraph

<pre>--formatted text (common phrase paste code)

<table>--form

<ul>--Non-sorted list

　　　　3) Variable elements (it is possible to determine the deserved element as a block or inline element, depending on the contextual context)

Applet-java Applet

<button>--button

<del>--Deleting text

<iframe>-inline-frame--Some browsers do not support frame, you can use this tag to make it show

<ins>--inserted text

<map>--Image Block

<object>--object Object

<script>--Client Script

　　　Difference: 1) block-level elements occupy a single row, the width of which automatically fills the width of its parent element, the inline element does not occupy a single row, the adjacent element is arranged on the same line, unless a row does not fit, it automatically wraps to the next line, its width with the content 　

Change and change

2) block-level elements can be set width,height,margin,padding property, inline element settings width,height Invalid, horizontal padding-left,padding-right,margin-left, Margin-right

All produce margin effects, but padding-top,padding-bottom,margin-top,margin-bottom in the vertical direction do not produce margin effects. (The horizontal direction is valid, the vertical direction is invalid)

　　Second, using CSS to achieve horizontal center elements

　　　　1) inline elements (when elements are set as text, pictures, etc.): Set text-align:center for the parent element;

2) Fixed Width block element: Left and right margin set to auto,eg:margin:0 auto;

3) variable width block element

1. Add a table tag (including <tbody>\<tr>\<td>) to the outside of the weightlifting element; set the left and right margin value to auto for table
2. Change the display pseudo-inline-block type of the block element, and then use Text-align:center to achieve the center
3. Set float for the parent element, and then set position:relative and left:50% for the parent element, and the child elements set position:relative and left:-50% to achieve horizontal centering.

　Third, using CSS to achieve vertical center elements　

1) The specific size of the known element (eg:width:400px; height:200px;)

#center {
width:400px;
height:200px;
Background-color: #ccc;
Position:absolute;
left:50%;
top:50%;
margin-top:-100px;
margin-left:-200px;
} 2) It is not known that the element size IE9 (-ms-), ie10+, and other modern browsers are supported.             The popularity of IE8 browsers in China is somewhat inappropriate (mobile Web development can be ignored). The cheap percent value of CSS3 transform instead of margin translate is the #center for its size {
width:400px;
height:200px;
Background-color: #ccc;
Position:absolute;
left:50%;
top:50%;                Transform:translate ( -50%,-50%); } 3) #center {width:400px;
height:200px;
Background-color: #ccc;
Margin:auto;
Position:absolute;
left:0;
top:0;
bottom:0;
right:0; }

CSS determines that elements are centered horizontally and vertically