css实现元素水平垂直居中

记录两个思路，当然还有其他方法，如果用到再补充：

1.在伸缩容器上使用主轴对齐justify-content和侧轴对齐align-items

.parent{display: flex;justify-content: center;align-items: center;}

2.使用position:absolute;

(1)不考虑子元素和父元素的宽高

 .parent{position:relative;}.child{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;}

(2)子元素宽高固定

.parent{position: relative;}.child{position: absolute;top: 50%;left: 50%;width: 80px;height: 60px;margin-left: -40px;margin-top: -30px;}

3.text-align + line-height实现单行文本水平垂直居中

  .test{text-align: center;line-height: 100px;

css实现元素水平垂直居中相关推荐

CSS块元素水平垂直居中的实现技巧
针对之前遇到过的一些特殊样式的实现,我今天做个总结,目的有二:一是将这些方法记录下来,以便将来需要用到时查找使用.二为将这些大神们智慧的结晶发扬光大,让广大前端程序猿们能够少走弯路.此贴为更新帖,以后 ...
CSS实现元素水平垂直居中的各种方法
关于 CSS 如何将元素进行水平垂直居中的几种常用方法前言在设计网页页面的过程中,总会有将元素或者文字进行水平或者垂直居中的要求,各种CSS样式调整,搞的头都大了.这里将会介绍 CSS 中几种常用 ...
css实现元素水平垂直居中——6种方式
实现元素水平垂直居中的方式: 利用定位+margin:auto 利用定位+margin:负值利用定位+transform table布局 flex布局 grid布局利用定位+margin:auto ...
css实现元素水平垂直居中 1
css的居中,可以分为水平居中和垂直居中,实现居中的方式有以下几种: 1.text-align:center 块状元素,水平居中(只适用于块级元素,块级元素内的行内元素可以居中或者将此行内元素设置为块 ...
利用css实现元素水平垂直居中的方法（分情况讨论）
首先需要说明,根据标准盒模型(这里暂且不关注低版本IE的盒模型),我们在css中设置的width指的是content-width,padding,margin,top,left这些属性为百分数时,计算 ...
js、css分别实现元素水平垂直居中
js实现元素水平垂直居中.css实现元素水平垂直居中 css实现元素水平垂直居中[4行代码] js实现元素水平垂直居中[弄巧成拙] css实现元素水平垂直居中[4行代码] #div{top:50%;l ...
CSS Transform让百分比宽高布局元素水平垂直居中
CSS Transform让百分比宽高布局元素水平垂直居中很早以前了解过当元素是固定宽度和高度的时候,水平垂直高居中的方法可以设置margin的负值来使其居中,这个负值是元素的宽和高的一半,比如宽高 ...
CSS未知宽高元素水平垂直居中
方法一 :table.cell-table 思路:显示设置父元素为:table,子元素为:cell-table,这样就可以使用vertical-align: center,实现水平居中优点:父元素( ...
CSS中实现div元素水平垂直居中
常用7种实现水平垂直居中方法: 1.行内元素水平垂直居中 2.绝对定位 + margin 3.绝对定位+margin:auto 4.绝对定位 + translate 5.flex 布局 6.flex+ ...

css实现元素水平垂直居中

css实现元素水平垂直居中相关推荐

最新文章

热门文章