css 实现居中

一时失言乱红尘 2022-11-21 06:57 152阅读 0赞

##### 一、水平居中 #####

1.  文本居中：`text-align: center;`
2.  flex布局  
    （1）容器：`flex-direction: row; justify-content: center;`, `flex-direction: column; align-items: center;`  
    （2）项目：根据容器的主轴方向，选择 `justify-self: center;` 或者 `align-self: center;`

##### 二、垂直居中 #####

1.  行内元素文本垂直居中：`vertical-align: middle;`
2.  块级元素文本垂直居中：`height: x; line-height: x;`
3.  flex布局  
    （1）容器：`flex-direction: row; align-items: center;`, `flex-direction: column; justify-content: center;`  
    （2）项目：根据容器的主轴方向，选择 `justify-self: center;` 或者 `align-self: center;`

##### 三、比较通用的方法设置居中 #####

1.  设置 `position`  
    （1）相对浏览器：设置 `positon: fixed`  
    （2）相对父元素：设置 `position: absolute` 或 `position: relative` （父元素为 `position: static` 时选择后者）
2.  设置 `margin`  
    （1）预处理1：若是元素脱离了文本流（失去了 `block` 或者 `inline-block` 的流特性），需要进行预处理操作使得元素在需要对齐的方向上重新具有流特性。没有流特性的元素，无法使用 `auto` 来自动计算 `margin`。
    
        /* 设置left, right属性可以让元素在水平方向上恢复流特性 */
        left: 0;
        right: 0;
        
        /* 设置top, bottom属性可以让元素在垂直方向上恢复流特性 */
        top: 0;
        bottom: 0;
    
    （2）预处理2：水平居中需要元素设置 `width`，垂直居中需要元素设置 `height`。这样才能通过 `auto` 为元素自动计算 `margin`。
    
    （3）设置 `margin: auto;`(水平垂直对齐)、`margin: 0 auto;`(水平对齐)、`margin: auto 0;`(垂直对齐)

发表评论取消回复

表情：

评论列表（有 0 条评论，152人围观）

还没有评论，来说两句吧...

相关阅读

相关 css实现垂直居中

在 CSS 中实现垂直居中有几种方式，这里列举几种常用的方法： 1. 使用 `display: flex` 和 `align-items: center`： .p

电玩女神/ 2024年03月27日 12:57/ 0 赞/ 34 阅读

相关 css 实现水平垂直居中

一、通过设置子元素 .parent{ position: absolute; / 非static即可 / width: 500px;

忘是亡心i/ 2022年12月30日 10:39/ 0 赞/ 208 阅读

相关 css实现垂直居中

1、父元素高度确定的情况下通过transform实现垂直居中  <style> .box-wrap { background-co

谁践踏了优雅/ 2022年12月22日 04:47/ 0 赞/ 135 阅读

相关 css 实现居中

一、水平居中 1. 文本居中：`text-align: center;` 2. flex布局（1）容器：`flex-direction: row; ju

一时失言乱红尘/ 2022年11月21日 06:57/ 0 赞/ 153 阅读

相关 CSS实现完美垂直居中

引用：[http://www.blueidea.com/tech/web/2006/3231.asp][http_www.blueidea.com_tech_web_2006_

红太狼/ 2022年09月30日 00:36/ 0 赞/ 189 阅读

相关如何实现CSS居中？–CSS居中常用方法

来源：[http://www.ido321.com/824.html][http_www.ido321.com_824.html] 一、水平居中 1、内联

分手后的思念是犯贱/ 2022年08月12日 16:06/ 0 赞/ 217 阅读

相关 CSS 实现水平居中与垂直居中

面试时遇到这个问题，当时答得很不全面，有必要做个总结。一、水平居中的实现 -------------------- 1. 行内元素解决方案在行内元素的父级

左手的ㄟ右手/ 2022年05月27日 05:51/ 0 赞/ 333 阅读

相关 CSS实现完美垂直居中

之前看到很多人一直都问这个问题，不过当时我没当一回事，因为在 CSS 中要垂直居中，多数是在有高度的情况下，或者容器高度不定的情况下才用，看上去比较舒服，而且实现的方法也不少，

本是古典何须时尚/ 2022年05月23日 07:29/ 0 赞/ 187 阅读

相关 css实现盒子水平居中

展示4种，有两个元素，父盒子和子盒子。 div: <div class="m1"> <div class="m2"></div> </div

古城微笑少年丶/ 2022年02月12日 21:09/ 0 赞/ 208 阅读

相关 CSS实现完美垂直居中

之前看到很多人一直都问这个问题，不过当时我没当一回事，因为在 CSS 中要垂直居中，多数是在有高度的情况下，或者容器高度不定的情况下才用，看上去比较舒服，而且实现的方法也不

妖狐艹你老母/ 2021年10月29日 12:54/ 0 赞/ 345 阅读