Javascript、css布局问题排序(纵横居中)
时间:2023-04-02 14:02:52
HTML
源码链接codeSandBoxJS代码:父包AppexportdefaultfunctionApp(){return(HelloCodeSandbox
开始编辑看一些奇迹发生了!
);}居中的几种实现方法1、使用margin:auto实现.Parent{height:500px;宽度:500px;border:1pxsolidblack;}.App{font-family:sans-serif;文本对齐:居中;边框:1px纯红色;宽度:300px;高度:300px;margin:0auto;}方法二,使用display:table;display:table-cell来实现.Parent{**display:table;**height:500px;宽度:500px;border:1pxsolidblack;}.App{text-align:center;边框:1px纯红色;**显示:表格单元格;vertical-align:middle;**}基本方法,使用div宽度计算margin/*case3:使div居中上下左右*/.Parent{height:100%;宽度:100%;border:1pxsolidblack;}.App{position:absolute;宽度:300px;高度:300px;文本对齐:居中;边框:1px纯色d;左:50%;顶部:50%;左边距:-150px;边距顶部:-150px;;边框:1px纯黑色;显示:弹性;弹性方向:行;1px纯红色;/*弹性:1;*/}