世界观察：[css]总结-如何实现水平垂直都居中对齐?

【资料图】

最后一种方法最简单

普通盒子-居中对齐: 方式一

思路:外面的容器盒子 outer 让他只有一行.里面元素改为非块元素. 因为vertical-align对块元素无效.然后用vertical-align:middle;垂直居中

        
    
你好啊

普通盒子-居中对齐: 方式二

思路: 计算内部需要对齐元素的margi-top: (父高-自身高)/2;前提条件: 父元素高度,自身高度要明确给定.且内部元素要能设置宽高.那就不能是行内元素

        
    你好啊

普通盒子-居中对齐: 方式三

思路: 和上面类似.但是改为计算父元素的padding-top.padding会撑开父元素高度. 再给父元素总高度减去 padding-top的数值 赋回去.padding-top数值计算方法: 父元素内容区高度-子元素总体高度/2其中: 子元素总体高度=内容区高度+上下边框高度+上下内边距高度

        
    你好啊

普通盒子-居中对齐: 方式四 -定位1

思路: 自绝父相---让父容器成为子元素的包含块定位,用2D位移优点: 不用繁琐的计算margin,padding. 也不用必须知道子元素的宽高.

        
    
你好啊

普通盒子-居中对齐: 方式五 -定位2

思路: 定位,自动margin注意: 子元素宽高要已给定

        
    
你好啊

弹性盒子-居中对齐:方式一

思路: 弹性容器 主轴,侧轴对齐方式都设置为center

弹性盒子-居中对齐:方式二

思路: 弹性项目自动分配margin

        
    你好啊

标签：