CSS Tips------未知宽度高度居中对齐<三种最优解决方案>

alphahans 发布于2019-08-01 15:44 / 2062人阅读

摘要：前言无论是还是移动端开发我们经常会遇到这样一个问题父元素内包裹子元素而子元素的宽度是未知的如何让子元素左右居中呢经过实战演练及资料搜索感觉以下三种方法是最优的解决方案有需要的同学可以看看相互交流共同学习以下三种方案的主题结构如下子元素内容布

前言

无论是pc还是移动端开发,我们经常会遇到,这样一个问题:父元素内包裹子元素,而子元素的宽度是未知的,如何让子元素,左右居中呢?经过实战演练,及资料搜索,感觉以下三种方法是最优的解决方案,有需要的同学可以看看,相互交流,共同学习.

0. 以下三种方案的主题html结构如下:

   
        
            子元素内容

1. flex布局

 第一种方案:使用CSS新特性,flex布局,这种流式布局方案在移动端上表现是非常棒的.将父元素display属性设为flex,然后align-atem居中,子元素不需要设置,看起来非常简单.

.parent{
  width:600px;
  height:300px;
  background:red;
  display:flex; 
  justify-content: center; 
  align-items: center; 
}
.child{
  background:green; 
}

2. 定位+transform

第二种方案是根据定位和transform属性来实现的.首先子元素对父元素绝对定位,使得子元素左上角水平竖直居中,因为子元素是未知的宽和高,所以将margin按自身的50%,向上向左移动即可,使用transform的translate属性完美解决.

.parent{
  width:600px;
  height:300px;
  background:red;
  position:relative; 
}
.child{
  background:green;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}

3. text-align+inline-block

第三种方案是根据inline-block的属性来实现的,对于该水平居中方法可能不需要太多的介绍，所有主流浏览器均支持 text-align 属性，只需要取值 center 即可；代码比较简单,但是对于inline-block造成的间距问题对复杂布局会有影响.

.parent{
 width:600px;
  height:300px;
  background:red;
  text-align:center; 
}
.child{
  background:green;  
  display:inline-block;
}

其实还有一些使用浮动的方案,以及display:table的方案也是可以实现的,只是个人觉得上述三种方法还是应用比较多的,前端开发的过程,兼容性问题是绕不过去的坎,多总结总结找到自己的解决方案才是最重要的.

GPU云服务器云服务器未知高度 CSS_JS_Tips 宽度高度 python &lt&gt

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/50077.html

CSS Tips------未知宽度高度居中对齐<三种最优解决方案>

摘要：前言无论是还是移动端开发我们经常会遇到这样一个问题父元素内包裹子元素而子元素的宽度是未知的如何让子元素左右居中呢经过实战演练及资料搜索感觉以下三种方法是最优的解决方案有需要的同学可以看看相互交流共同学习以下三种方案的主题结构如下子元素内容布前言无论是pc还是移动端开发,我们经常会遇到,这样一个问题:父元素内包裹子元素,而子元素的宽度是未知的,如何让子元素,左右居中呢?经过实战演练,...

big_cat 2019-08-29 11:19 评论0 收藏0
CSS Tips------未知宽度高度居中对齐<三种最优解决方案>

摘要：前言无论是还是移动端开发我们经常会遇到这样一个问题父元素内包裹子元素而子元素的宽度是未知的如何让子元素左右居中呢经过实战演练及资料搜索感觉以下三种方法是最优的解决方案有需要的同学可以看看相互交流共同学习以下三种方案的主题结构如下子元素内容布前言无论是pc还是移动端开发,我们经常会遇到,这样一个问题:父元素内包裹子元素,而子元素的宽度是未知的,如何让子元素,左右居中呢?经过实战演练,...

selfimpr 2019-08-20 11:07 评论0 收藏0
前端基础-CSS的属性相关设置

摘要：值描述左边对齐默认值右对齐居中对齐两端对齐文本装饰为重点值描述默认。继承父元素的属性的值。具体的像素一定要加单位例如，等等第一个值是水平位置，第二个值是垂直位置。单位是像素或任何其他的单位。一字体属性二文本属性三背景属性四盒子模型五盒子模型各部分详解一、字体属性1、font-weight：文字粗细（表格中*为重点）取值描述normal默认值，标准粗细bord粗体 *border...

番茄西红柿 2019-04-23 13:41 评论0 收藏0
HTML、CSS知识学习与整理

摘要：命名规范类型对象如。常量命名方式全部大写。子容器在交叉轴的排列方向。交叉轴的起点对齐交叉轴的终点对齐交叉轴的中点对齐交叉轴的两端对齐，轴线间隔平均分布轴线两侧间隔相等默认值，轴线占满整个交叉轴。命名1.驼峰式命名法：(1) 大驼峰命名法：首字母大写。(2) 小驼峰命名法：首字母小写。2.文件资源命名：(1) 不得含有空格。(2) 建议只使用小写字母，除了某些为说明文件的情况（如 README...

pcChao 2019-08-29 15:18 评论0 收藏0