布局中常见的居中问题
说到布局除了浮动以及定位外还有一个不得不提的点,那就是居中,居中问题我们在网页布局当中经常遇到,那么以下就是分为两部分来讲,一部分是传统的居中,另一种则是flex居中,每个部分又通过分为水平垂直居中来讲。
一、传统居中方式
1.1水平居中
1.1.1 inline
对于inline元素以及纯文本只需要为父元素设置
text-align: center;
适用于
inline, inline-block, inline-table, inline-flex
1.1.2 block
对于block元素则需要为想要居中的block设置
margin: 0 auto;
1.1.3 more-block:
多个块级元素直接居中同单个块级居中一样,但是如果要在单行内居中,需要先通过
display: inline-block
将块级元素转化为行内块元素再按照行内元素为父元素添加
text-align: center
的居中方式居中。
1.2垂直居中
1.2.1 inline
单行情况下,可以为父元素设置相同的上下padding实现居中
如果只是单行文字也可以设置行高等于父元素高度实现居中
如果设置上下相同padding没有用的话,可能该元素是表格,可以使用
vertical-align: middle
设定对齐基线为middle实现居中。
1.2.2 block
要居中的元素高度固定的情况下,可以使用position来定位,设置top为50%,但是因为top是盒子上边界的定位距离,所以还要通过负值的margin-top往回拉宽度的一半。
(以下只写核心代码,其他宽度高度border自己加)
.parent {position: relative;
}
.child {position: absolute;top: 50%;height: 100px;margin-top: -50px;
}
但是如果高度不固定的话则可使用变换来替换margin负值达到动态高度的一半
// 只需要替换上面的margin-top: -50px; height可以直接去掉了
transform: translateY(-50%);
1.3水平垂直都居中
1.3.1 固定宽高
固定宽高下,同垂直居中方法一样,也是绝对定位50%然后通过margin负值拉回去
.parent {position: relative;
}
.child {position: absolute;top: 50%;left: 50%; margin: -50px 0 0 -50px; // 宽高为100px
}
此为还有一种方法也可以实现已知宽高时候的居中
// 此处如果是不定宽高的话就会child铺满整个父元素
.child {position: absolute;top:0;bottom:0;left:0;right:0;margin:auto;
}
1.3.2 不固定宽高
// 同样是替换margin负值
transform: translate(-50%, -50%);
二、Flex居中方式
Flex的出现解决了传统居中方式难以实现的麻烦,仅需要几行代码就可以实现居中,Flex布局不仅能用于居中,在其他布局当中也相当的有效。想要启动Flex只要在父元素设置
display: flex
,内联元素的话则是
display: inline-flex
.
2.1 水平居中
.parent {display: flex;justify-content: center;
}
2.2 垂直居中
.parent {display: flex;align-items: center;
}
2.3 水平垂直居中
.parent {display: flex;justify-content: center;align-items: center;
}
此外,如果想要实现竖着排列flex实现也很容易,仅需要换一下主轴方向,多添加一行就行了。
.parent {flex-direction: column;
}
参考
学习CSS布局
视觉格式化模型
css-tricks:居中详解
本文转载于:猿2048➮https://www.mk2048.com/blog/blog.php?id=1akc1jb&title=布局中常见的居中问题
布局中常见的居中问题相关推荐
- css布局中的居中问题
css布局中的居中问题 作者:阿捷 2004-7-5 14:35:49 #sample{ HEIGHT:240px;WIDTH:400px; BACKGROUND: url(http://www.w3 ...
- Android 布局中 如何使控件居中
首先要分两种不同情况,在两种不同的布局方式下:LinearLayout 和RelativeLayout 1. LinearLayout a). android:layout_gravity=" ...
- css居中的几种方法_CSS布局中的水平居中的方法
在我们做网站的过程中,怎么都逃不掉居中这个话题,各种花里胡哨的,可能只需要掌握两三个就可以完成一个网页的布局了.今天就来介绍下水平居中有哪些方法. 第一种,设置当前元素水平居中,元素为block时 要 ...
- Android中常见布局
android中常见布局 [1]线性布局 水平 垂直. <?xml version="1.0" encoding="utf-8"?> <Lin ...
- java layout组件居中_Android 布局中 如何使控件居中
首先要分两种不同情况,在两种不同的布局方式下:LinearLayout 和RelativeLayout 1. LinearLayout a). android:layout_gravity=" ...
- css什么是自适应布局,CSS中常见的自适应布局是什么
CSS中常见的自适应布局是什么 发布时间:2020-12-05 13:24:07 来源:亿速云 阅读:102 作者:小新 这篇文章主要介绍CSS中常见的自适应布局是什么,文中介绍的非常详细,具有一定的 ...
- android 按钮 图片文字居中显示,[Android]Android 布局中如何让图片和文字居中显示?...
图片文字居中显示 **①组件TextView的属性 drawableTop ``` 块内或者行内图片与文字居中对齐最靠谱的方式! 做图片与文字在一行的按钮时候最常用到,总结了一个靠谱的方法,终于可以完 ...
- HTML+CSS中常见的几种居中方式
前言 在HTML+CSS网页制作开发中经常使用居中操作,实现方式更是多种多样,为了方便大家学习,文章将为大家介绍几种最常见的水平居中方式以及水平+垂直居中方式,比较适合初学者使用. 一.水平居中 方法 ...
- android控件位置居中,Android 的布局中如何使控件居中
首先要分两种不同情况,在两种不同的布局方式下:LinearLayout 和RelativeLayout 1. LinearLayout a). android:layout_gravity=" ...
最新文章
- iOS 线程之GCD的高级使用方法
- git撤消所有未提交或未保存的更改
- 计算机基础办公应用考试试题,计算机基础考试试题库和答案.doc
- pytorch crossentropy为nan
- 深入理解 Java 锁与线程阻塞
- 26个提升java性能需要注意的地方
- PHP 接收 UDP包_php只能做网站?基于swoole+websocket开发双向通信应用
- 设计灵感|怎么设计渐变海报更有趣味性?
- mysql的命令行常用命令_MySQL Command Line[mysql命令行常用命令]
- java做h5小游戏服务端_神藏西游H5游戏源码服务端+客户端+搭建教程
- 流媒体之RTMP——librtmp推流测试
- 私活利器:Java企业级快速开发框架——若依 前后端分离版本编译
- MATLAB函数downsample的用法详解
- 导航守卫之组件内守卫及后置钩子
- 分割字符串(每个子串的ASCII码值的和均为水仙花数)
- 华为单板硬件秋招面经分享(已入池)
- 低年级趣味写话——绘本《小猪变形计》仿写学生优作
- C# 获取当前屏幕大小 获取屏幕大小
- 牺牲速度来节省内存,Redis是觉得自己太快了吗?
- ecshop收货地址货到付款修改