zoukankan      html  css  js  c++  java
  • css 水平垂直居中

    内联块元素方法display: inline-block

    .parent
    	.child
    
    .parent
    	 100px
    	height: 100px
    	border: 1px solid red
    	text-align: center // 水平居中
    	font-size: 0
    	&::after
    		content: ''
    		display: inline-block
    		vertical-align: middle
    		 0
    		height: 100%
    .child
    	display: inline-block
    	vertical-align: middle
    	 50px
    	height: 50px
    	border: 1px solid blue
    

    !> 可能会在水平方向会有一定的偏移量,《css世界》里面提到‘幽灵节点’,给父容器加了一个font-size:0 解决

    表格元素方法dispaly: table-cell

    .parent
    	.child
    
    .parent
    	 100px
    	height: 100px
    	border: 1px solid red
    	font-size: 0
    	display: table-cell
    	vertical-align: middle
    .child
    	 50px
    	height: 50px
    	border: 1px solid blue
    	margin: 0 auto
    

    相对定位position: absolute

    .parent
    	.child
    
    .parent
    	 100px
    	height: 100px
    	border: 1px solid red
    	position: relative
    .child
    	 50px
    	height: 50px
    	border: 1px solid blue
    	position: absolute
    	top: 0
    	bottom: 0
    	left: 0
    	right: 0
    	margin: auto
    

    相对定位position + transform

    .parent
    	.child
    
    .parent
    	 100px
    	height: 100px
    	border: 1px solid red
    	position: relative
    .child
    	 50px
    	height: 50px
    	border: 1px solid blue
    	position: absolute
    	top: 50%
    	left: 50%
    	transform: translate(-50%, -50%)
    

    flex布局

    .parent
    	.child
    
    .parent
    	 100px
    	height: 100px
    	border: 1px solid red
    	display: flex
    	justify-content: center
    	align-items: center
    .child
    	 50px
    	height: 50px
    	border: 1px solid blue
    

    flex + margin

    .parent
    	.child
    
    .parent
         100px
        height: 100px
        border: 1px solid red
        display: flex
    .child
         50px
        height: 50px
        border: 1px solid blue
        margin: auto
    

    grid布局

    .parent
    	.child
    
    .parent
    	 100px
    	height: 100px
    	border: 1px solid red
    	display: grid
    .child
    	 50px
    	height: 50px
    	border: 1px solid blue
    	margin: auto
    
  • 相关阅读:
    result set sql server
    [转载]:C#、.Net面试题目及答案
    [转载]:合并两个已排序好的int数组,并排序返回c#实现
    [转载]实际举例C#引用类型和值类型的区别
    mysql 性能优化方案
    oracle 并行原理深入解析及案例精粹
    创建Oracle外部表 External Table
    Oracle 分区表
    MySQL索引类型一览
    MySQL配置文件mysql.ini参数详解、MySQL性能优化
  • 原文地址:https://www.cnblogs.com/fanlinqiang/p/10981526.html
Copyright © 2011-2022 走看看