css水平居中

1、元素水平居中

margin：0 auto；

為居中的原因

①元素沒有設定寬度，沒有寬度無法居中

②設定寬度依然不好使，可能設定的行內元素。

示例1：

doctype html

>
<
html 
lang
="en"
>
<
head
>
<
meta 
charset
="utf-8"
>
<
title
>
title
>
<
meta 
name
="keywords"
content
="css html"
>
<
meta 
name
="description"
content
="css html study"
>
<
style
>
.content
style
>
head
>
<
body
>
<
div 
class
>
<
div 
class
="content"
>
居中 
2、元素水平垂直居中
方案1、position元素已知寬度
父元素設定為position：relative
子元素設定為position：absolute
距離上50%  據左50% 然後減去元素自身的寬度的距離就可以實現
小貼士：
margin標記可以帶乙個、二個、三個、四個引數，各有不同的含義。
margin: 20px;（上、下、左、右各20px。）
margin: 20px 40px;（上、下20px；左、右40px。）
margin: 20px 40px 60px;（上20px；左、右40px；下60px。）
margin: 20px 40px 60px 80px;（上20px；右40px；下60px；左80px。）
示例2：
方案2：position  tran's'f'orm元素未知寬度
將margin改為transform
transform：translate（-50%，-50%）
示例3：
方案3：flexe（布局）
示例4：
margin: 20px;（上、下、左、右各20px。）
margin: 20px 40px;（上、下20px；左、右40px。）
margin: 20px 40px 60px;（上20px；左、右40px；下60px。）
margin: 20px 40px 60px 80px;（上20px；右40px；下60px；左80px。）
 
css 水平居中 垂直居中 水平垂直居中
一 水平居中 1 行內元素水平居中text align center 2 塊級元素水平居中margin 0 auto 3 多個塊狀元素的水平居中 實現多個水平排列的塊狀元素的水平居中，是將要水平排列的塊狀元素設為display inline block，然後在父級元素上設定text align ce...
css水平居中 垂直居中 水平垂直居中
css水平居中 垂直居中 水平垂直居中 水平居中 行內元素 block text align 塊級元素 方案一 分寬度定不定兩種情況 定寬度 margin 0 auto 作用 使盒子自己居中，意思是上下距離為0，auto就是左右自適應兩邊距離 不定寬度 設定子元素display inline blo...
CSS 水平居中
零散的知識不整理進入自己的知識框架太容易忘，對於css腦子裡零零散散的！整理自勉！margin auto 此居中的方法前提為居中塊級元素寬度必須固定才可設定auto自動計算左右補白 可見塊2的margin left,margin right設定為auto後實現水平居中，但是margin top,ma...