css各种居中方法总结

- 日理万妓 2022-12-25 01:49 170阅读 0赞

# css各种居中方法总结 #

故心故心故心故心小故冲啊

--------------------

### 文章目录 ###

*  css各种居中方法总结
 *  前言
 *  1，水平居中+阻止子元素定宽+ margin
 *  2，水平居中+ inline-block子元素不定宽+ text-align
 *  3，水平居中+ inline-block子元素定宽+ text-align
 *  4，水平居中+内联子元素不定宽+ text-align
 *  5，水平垂直居中+ flex +子元素不定宽高
 *  6，水平垂直居中+ flex +子元素不定宽高+ margin
 *  7，水平垂直居中+网格+子元素不定宽高
 *  8，水平垂直居中+网格+子元素不定宽高（居中属性设置在子元素上）
 *  9，水平垂直居中+网格+子元素不定宽高+ margin
 *  10，水平垂直居中+ absolute +子元素定宽高+ margin
 *  11，水平垂直居中+ absolute +子元素不定宽高+ margin
 *  12，水平垂直居中+ absolute +子元素不定宽高+ transform
 *  13，水平垂直居中+ table-cell +子元素不定宽高+ text-align + vertical-align
 *  14，水平垂直居中+ inline / inline-block子元素不定宽高+ vertical-align
 *  15，水平垂直居中+书写模式+内联/内联块子元素不定宽高+ text-align
 *  16，水平垂直居中+水平垂直居中+块子元素定宽+父元素高度由子元素决定+ padding / margin
 *  17，水平垂直居中+子元素不定宽高+父元素高度由子元素决定+ line-height
 *  正方形十字居中
 *  总结

--------------------

# 前言 #

在使用css设置页面样式时会经常遇到需要居中的情况，一下总结了一些css在不同条件下实现居中的方法。有一些方法具有一些hack的味道，大家看看就好。  
为了方便显示居中效果，给父元素和子元素都设置了边框和背景样式，由于效果都差不多，对于每一个方法我就不截图显示了，水平居中的大概实现是这样的  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70]

# 1，水平居中+阻止子元素定宽+ margin #

# 2，水平居中+ inline-block子元素不定宽+ text-align #

# 3，水平居中+ inline-block子元素定宽+ text-align #

# 4，水平居中+内联子元素不定宽+ text-align #

# 5，水平垂直居中+ flex +子元素不定宽高 #

# 6，水平垂直居中+ flex +子元素不定宽高+ margin #

# 7，水平垂直居中+网格+子元素不定宽高 #

# 8，水平垂直居中+网格+子元素不定宽高（居中属性设置在子元素上） #

# 9，水平垂直居中+网格+子元素不定宽高+ margin #

# 10，水平垂直居中+ absolute +子元素定宽高+ margin #

# 11，水平垂直居中+ absolute +子元素不定宽高+ margin #

fit-content这属性具有相容问题

# 12，水平垂直居中+ absolute +子元素不定宽高+ transform #

# 13，水平垂直居中+ table-cell +子元素不定宽高+ text-align + vertical-align #

# 14，水平垂直居中+ inline / inline-block子元素不定宽高+ vertical-align #

# 15，水平垂直居中+书写模式+内联/内联块子元素不定宽高+ text-align #

这个方法受最小尺寸影响，也是有兼容问题的

# 16，水平垂直居中+水平垂直居中+块子元素定宽+父元素高度由子元素决定+ padding / margin #

# 17，水平垂直居中+子元素不定宽高+父元素高度由子元素决定+ line-height #

# 正方形十字居中 #

# 总结 #

主要总结了一些日常遇到的css居中方法，其中双重的方法也可以组合使用.

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70]: /images/20221120/830ee950008e4c61b79b8dc044cf70e3.png