[CSS] 子元素垂直居中的两种方式

1. 多个子元素水平并排，IE10以下失效

1 display: flex;
2 align-items: center;
3 justify-content: center;

2.多个子元素竖直排列，这种方式会导致margin失效，IE8以下失效

1 display: table-cell;
2 vertical-align: middle;

时间： 2024-11-03 03:24:36

[CSS] 子元素垂直居中的两种方式的相关文章

块级元素垂直居中的两种方式

第一种方式:利用相对定位将子元素的位置设为父元素高度的一半,再将子元素的margin-top设为自身高度一半,且为负值. <div class="a"> <div class="b"></div></div>.a{ width: 500px; height: 500px: position: relative;}.b{ width: 100px; height: 100px; /*相对定位至父元素高度一半*/ posi

HTML中实现子容器垂直居中的几种方式

年前前端圈蛮热闹的,大家撕的挺欢的,阿当想说的并不是固步自封,抵制学习新东西,而是想说要夯实基础,然后对框架有甄别能力的基础上再去有选择的学习.归根结底还是要掌握好根本,也就是道,其余的工具都不过是术,得道了,术这些东西自然手到擒来.好了,胡扯打住.阿当说区别真前端和伪前端其中一点就是能说出几种HTML元素的垂直居中方式. 那我在这里总结一下我get的几种方式. 代码结构如下,父容器,子容器宽高不确定. <div class="parent"> <div class=

CSS中清除浮动的两种方式

在CSS中,父元素中的子元素如果使用了float,会导致父元素塌陷,高度为0. 对于这种情况,常见的解决方式有两种. 一.增加新的div,应用clear:both属性 html: 1 <div class="father"> 2 <div class="div1">1</div> 3 <div class="div2">2</div> 4 <div class="div3

CSS原生实现下拉列表的两种方式

CSS伪类的一个非常重要的应用就是下拉菜单. 最近在学习中发现网上纯粹用CSS实现的下拉菜单主要有两种思路:一种是通过visibility属性的切换,另一种是基于display属性的切换.二者在大体的结构上是一致的,只是对于二级子菜单的隐藏和显示的实现策略上有所不同. 下拉菜单的HTML代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xh

css控制元素垂直居中的几种方法

一.单行文本垂直居中 HTML: <div id="parent"> <div id="child">Content here</div> </div> CSS: #child { line-height: 200px; } 二.垂直居中一张图片 HTML <div id="parent"> <img src="image.png" alt="&quo

同一个请求分配一个traceId的两种方式

有时候我们需要某个请求下的所有的traceId都是一致的,以获得统一解析的日志文件.便于排查问题. 为每一个请求分配同一个traceId据我所知有两种方式:MDC和ThreadLocal,MDC的内部实现也是ThreadLocal,下面分别介绍这两种方式. 一.MDC MDC(Mapped Diagnostic Contexts),翻译过来就是:映射的诊断上下文.意思是:在日志中(映射的)请求ID(requestId),可以作为我们定位(诊断)问题的关键字(上下文). 有了MDC工具,只要在接口

css清除浮动的两种方式（clearfix和clear）

最近总是在用浮动,这两种方式总是浮现在眼前,或者说去掉父级和同级浮动样式总在思考中.两种方式怎么写都在base.css中. 在做瑞祥之旅的过程中,还是吃了一个大亏,就是清除浮动,不管是同级还是父级,都没清除浮动,导致经常会有div包不住子级的东西(经常一审查height=0).现利用两例子来巩固下. <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"

二维数组的认识及其表示元素的两种方式

/* ============================================================================ Name : TeatArr.c Author : lf Version : Copyright : Your copyright notice Description : 二维数组的认识以及其表示元素的两种方式备注说明 1 要理解二维数组的存储方式. 2 实际上利用a[i][j]的方式并不"正统",这是这靠近我们的常识一些

java的取出map里所有元素的两种方式

/* * 取出map元素的两种方式 */package com.map.test; import java.util.HashMap;import java.util.Iterator;import java.util.Map;import java.util.Set; public class Test1 { public static void main(String[] args) { // TODO 自动生成的方法存根 Map<Integer,String> mp=new HashMa