水平居中方案
方案一:text-align + inline-block
<div id="parent1"> |
#parent1{ |
方案二:margin:0 auto
<div id="parent2"> |
#parent2{ |
方案三:absolute+transform)
<div id="parent3"> |
#parent3{ |
方案四:justify-content
<div id="parent4"> |
#parent4{ |
垂直居中方案
方案一: 利用 line-height 实现垂直居中
- 这种方法适用于单行文本垂直居中,如果文本内容太长,出现了换行,换行后的内容会溢出
<div id="example1"> |
#example1 { |
方案二 利用 display: table 实现垂直居中
<div id="example2"> |
#example2 { |
方案三 margin 填充 这种方法需要知道内外容器的大小
<div id="example3"> |
#example3 { |
方案四:经典 absolute 布局上下文垂直居中
<div id="example4"> |
#example4 { |
方案五:absolute+transform
<div id="example5"> |
#example5 { |
方案六 利用margin:auto 居中
<div id="expample6"> |
#expample6 { |
方案七 利用 Flex布局 居中
<div id="expample7"> |
#expample7 { |
Gitalking ...