CSS布局总结（三）

发布时间：2023-09-06 02:24责任编辑：赖小花关键词：CSS

前言：今天学的有点少，主要是有点迷.... 这是昨天没写的

一、水平居中

.parent{ ?text-aglin:center; ?}.child{ ?display:inline-block; ?}

.parent{ ?display:table; ?margin:0 auto; ???}

在知道元素的宽度的情况下

.child{ ?width:500px; ?position:absolute; ?left:50%; ?margin-left:-250px; ?????}

在不知道元素的宽度的情况下

.child{ ?position:absolute; ?top:50%; ?left:50% ?transform:translateX(-50%); ????}

.parent{ ?display:table-cell; ?vertical-aglin:middle; ?}

.child{ ?position:absolute; ?top:50%; ?transform:transitionY(-50%); ????}

.parent{ ?display:flex; ?aglin-items:center; ???}

.parent{ ?display:table-cell; ?vertical-aglin:middle; ?text-aglin:center; ???}.child{ ?display:inline-block; ?}

.child{ ?position:absolute; ?top:50%; ?left:50% ?transform:translate(-50%,-50%) ????}

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

CSS布局总结（三）

原文地址：https://www.cnblogs.com/armouy/p/10035672.html