css确定元素水平居中和垂直居中

Posted 2020-07-01

---恢复内容开始---

    首先，我们在了解如何通过css了解元素水平和垂直居中之前，先要了解下html都有哪些元素，这些元素与偶有哪些分类，因为不同类别的元素的水平垂直居中方法是完全不同的，究其根本当然是因为不同类别元素的性质不同。所以我们先来了解下html的元素类别。

    一、HTML元素分类

　　　　1）内联（inline)元素：

　　　　　　<a>--锚点

　　　　　　<abbr>--缩写

　　　　　　<acronym>--首字母缩写(HTML5不支持，请使用<abbr>代替）

　　　　　　<b>--粗体（不推荐）

　　　　　　<bdo>--可覆盖文本默认方向

　　　　　　<big>--大字体（HTML5不支持，用CSS代替)

　　　　　　<br>--换行

　　　　　　<cite>--引用

　　　　　　<code>--计算机代码

　　　　　　<dfn>--定义字段

　　　　　　<font>--字体设定（不推荐）

　　　　　　<em>--强调（表现也为斜体，有语义）

　　　　　　<i>--斜体(无语义）

　　　　　　<img>--图片

　　　　　　<input>--输入框

　　　　　　<kbd>--定义键盘文（已废除，不推荐）

　　　　      <label>--表格标签

　　　　　　<q>--短引用

　　　　　　<s>--中划线（不推荐）

　　　　　　<samp>--定义返利计算机代码

　　　　　   <select>--项目选择（下拉选择框）

　　　　　　<small>--小字体文本

　　　　　　<span>--常用内联容器，定义文本内区块

　　　　　　<strike>--删除线（用<del>代替）

　　　　　　<strong>--粗体强调

　　　　　　<sub>--下标

　　　　　　<sup>--上标

　　　　　　<textarea>--多行文本输入框

　　　　　　<tt>--电传文本（HTML5不支持）

　　　　　　<u>--下划线（不推荐）

　　　　　　<var>--定义变量

 

　　　　2）块状（block）元素：

　　　　　　<address>--地址

　　　　　　<blockquote>--块引用

　　　　　　<center>--居中对齐块（HTML5不支持，用CSS代替）

　　　　　　<dir>--目录列表

　　　　　　<div>--常用块级元素　　　　　　

　　　　　　<dl>--定义列表

　　　　　　<fieldset>--可将表单一部分内容打包（form)

　　　　　　<form>--交互表单

　　　　　　<h1>...<h6>--标题

　　　　　　<hr>--水平分隔线

　　　　　　<isindex>-input prompt

　　　　　　<menu>--菜单列表

　　　　　　noframes-frames--可选内容（对于不支持frame的浏览器显示此区块内容）

　　　　　　<noscript>---可选脚本内容（对于不支持script的浏览器显示此区块内容）

　　　　　　<ol>--排序列表

　　　　　　<p>--段落

　　　　　　<pre>--格式化文本（常用语粘贴代码）

　　　　　　<table>--表格

　　　　　　<ul>--非排序列表

 

　　　　3）可变元素（即可根据上下文语境决定活该元素为块状或内联元素）

　　　　　　applet - java applet

　　　　　　<button>--按钮

　　　　　　<del>--删除文本

　　　　　　<iframe>-inline-frame--一些浏览器不支持frame，则可使用这个标签使其展现

　　　　　　<ins>--插入的文本

　　　　　　<map>--图片区块

　　　　　　<object>--object对象

　　　　　　<script>--客户端脚本

 

　　　　区别：1）块级元素单独占一行，其宽度自动填满其父元素的宽度；行内元素不会单独占一行，相邻元素排列在同一行，除非一行排不下，会自动换到下一行，其宽度随内容

                         变化而变化

　　　　　　　2）块级元素可设置width,height,margin,padding属性；内联元素设置width,height无效，水平方向的padding-left,padding-right,margin-left,margin-right

    　　　　　　　都产生边距效果，但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。（水平方向有效，竖直方向无效）

 

　　二、利用CSS实现元素水平居中

　　　　1）行内元素（被设元素为文本、图片等元素时）：给父元素设置text-align:center;

　　　　2)定宽块状元素：左右margin设为auto,eg:margin:0 auto;

　　　　3)不定宽块状元素

1. 为需设置举重元素外面加一个table标签（包括<tbody>\<tr>\<td>);为table设置左右margin值为auto
2. 改变块状元素的display伪inline-block类型，然后使用text-align:center来实现居中
3. 给父元素设置float，然后给父元素设置position:relative和left:50%,子元素设置position:relative和left:-50%来实现水平居中。

　　　　

---恢复内容结束---

    首先，我们在了解如何通过css了解元素水平和垂直居中之前，先要了解下html都有哪些元素，这些元素与偶有哪些分类，因为不同类别的元素的水平垂直居中方法是完全不同的，究其根本当然是因为不同类别元素的性质不同。所以我们先来了解下html的元素类别。

    一、HTML元素分类

　　　　1）内联（inline)元素：

　　　　　　<a>--锚点

　　　　　　<abbr>--缩写

　　　　　　<acronym>--首字母缩写(HTML5不支持，请使用<abbr>代替）

　　　　　　<b>--粗体（不推荐）

　　　　　　<bdo>--可覆盖文本默认方向

　　　　　　<big>--大字体（HTML5不支持，用CSS代替)

　　　　　　<br>--换行

　　　　　　<cite>--引用

　　　　　　<code>--计算机代码

　　　　　　<dfn>--定义字段

　　　　　　<font>--字体设定（不推荐）

　　　　　　<em>--强调（表现也为斜体，有语义）

　　　　　　<i>--斜体(无语义）

　　　　　　<img>--图片

　　　　　　<input>--输入框

　　　　　　<kbd>--定义键盘文（已废除，不推荐）

　　　　      <label>--表格标签

　　　　　　<q>--短引用

　　　　　　<s>--中划线（不推荐）

　　　　　　<samp>--定义返利计算机代码

　　　　　   <select>--项目选择（下拉选择框）

　　　　　　<small>--小字体文本

　　　　　　<span>--常用内联容器，定义文本内区块

　　　　　　<strike>--删除线（用<del>代替）

　　　　　　<strong>--粗体强调

　　　　　　<sub>--下标

　　　　　　<sup>--上标

　　　　　　<textarea>--多行文本输入框

　　　　　　<tt>--电传文本（HTML5不支持）

　　　　　　<u>--下划线（不推荐）

　　　　　　<var>--定义变量

 

　　　　2）块状（block）元素：

　　　　　　<address>--地址

　　　　　　<blockquote>--块引用

　　　　　　<center>--居中对齐块（HTML5不支持，用CSS代替）

　　　　　　<dir>--目录列表

　　　　　　<div>--常用块级元素　　　　　　

　　　　　　<dl>--定义列表

　　　　　　<fieldset>--可将表单一部分内容打包（form)

　　　　　　<form>--交互表单

　　　　　　<h1>...<h6>--标题

　　　　　　<hr>--水平分隔线

　　　　　　<isindex>-input prompt

　　　　　　<menu>--菜单列表

　　　　　　noframes-frames--可选内容（对于不支持frame的浏览器显示此区块内容）

　　　　　　<noscript>---可选脚本内容（对于不支持script的浏览器显示此区块内容）

　　　　　　<ol>--排序列表

　　　　　　<p>--段落

　　　　　　<pre>--格式化文本（常用语粘贴代码）

　　　　　　<table>--表格

　　　　　　<ul>--非排序列表

 

　　　　3）可变元素（即可根据上下文语境决定活该元素为块状或内联元素）

　　　　　　applet - java applet

　　　　　　<button>--按钮

　　　　　　<del>--删除文本

　　　　　　<iframe>-inline-frame--一些浏览器不支持frame，则可使用这个标签使其展现

　　　　　　<ins>--插入的文本

　　　　　　<map>--图片区块

　　　　　　<object>--object对象

　　　　　　<script>--客户端脚本

 

　　　　区别：1）块级元素单独占一行，其宽度自动填满其父元素的宽度；行内元素不会单独占一行，相邻元素排列在同一行，除非一行排不下，会自动换到下一行，其宽度随内容

                         变化而变化

　　　　　　　2）块级元素可设置width,height,margin,padding属性；内联元素设置width,height无效，水平方向的padding-left,padding-right,margin-left,margin-right

    　　　　　　　都产生边距效果，但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。（水平方向有效，竖直方向无效）

 

　　二、利用CSS实现元素水平居中

　　　　1）行内元素（被设元素为文本、图片等元素时）：给父元素设置text-align:center;

　　　　2)定宽块状元素：左右margin设为auto,eg:margin:0 auto;

　　　　3)不定宽块状元素

1. 为需设置举重元素外面加一个table标签（包括<tbody>\<tr>\<td>);为table设置左右margin值为auto
2. 改变块状元素的display伪inline-block类型，然后使用text-align:center来实现居中
3. 给父元素设置float，然后给父元素设置position:relative和left:50%,子元素设置position:relative和left:-50%来实现水平居中。

　　三、利用CSS实现元素垂直居中　　

　　　　   1）已知元素的具体尺寸（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)可不知道元素具体尺寸 IE9(-ms-), IE10+以及其他现代浏览器才支持。中国盛行的IE8浏览器被忽略是有   

            些不适宜的（手机web开发可忽略）。

             CSS3  transform代替margin   translate的便宜百分比值是针对自身大小的

               #center{
              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;

                 }