Box Style
CSS实现行内和上下自适应的几种方法
CSS实现⾏内和上下⾃适应的⼏种⽅法在写⼀个移动端⽹页，发现⽹页的头部搜索框两边各有固定宽度的按钮，搜索框可以根据宽度的变化来改变⾃⼰的宽度，达到填充的⽬的，也就是⼀种⾃适应吧，下⾯写写⾃⼰尝试的⼏种⽅法⼀利⽤css3 的width：calc（100% - npx）；<body><div style="border: 1px solid black;width: 100%;height: 100px"><div class="div1" style="float: left;height: 50px;width: 100px;background: red"></div><div class="div2" style="float: left;height: 50px;width:calc(100% - 120px);background: yellow"></div></div></body>注意 width:calc(100% - 120px); 两边都有空格，不要问我为什么会知道。
⼆利⽤display:table和display:table-cell；<body><div class="box" style="border: 1px solid black;width: 100%;height: 100px;display: table"><li class="left" style="background: red;display: block;width: 100px;height: 100px;"></li><li class="right" style="background: deepskyblue;display: table-cell;width: 100%"></li></div></body>display:table 这个属性很少⽤，display:table-cell可以⾃适应宽度，这点倒是挺好的。
html里面自定义弹出窗口
html⾥⾯⾃定义弹出窗⼝ ⽹页上默认的提⽰框或对话框⼀般⽐较丑，可以利⽤div遮盖层来⾃定义对话框 1.定义⼀个按钮或者链接（项⽬⾥⾯是通过点击⼀个图⽚） <img src="images/zz.gif" style="margin-top:16%" onclick="myalert('描述（限200字）：')"/> 2.设置隐藏的遮罩层 <div id="divResult"></div><div id="bg"></div> <div class="box" style="display: none"> <div class="title">标题</div> <div class="list2"> <p></p> </div> <div> <textarea id="remark" style="width:80%;margin-left:5%"></textarea> </div> <div class="end"> <center> <a id="btnZhuanhui" href="#" class="close" style="color:#000000; font-size:16px; margin-right:5%">确定</a> <a id="btnCloseHref" href="#" class="close" style="color:#000000; font-size:16px; margin-left:5%">取消</a> </center> </div> </div> 3.⽤css设定⾃⼰的通⽤样式 .box { position: absolute; width: 250px; left: 50%; height: auto; z-index: 100; background-color: #fff; border: 1px solid rgb(0,153,153); /*padding: 1px;*/ } .box div.title { height: 35px; font-size: 16px; background-color: #099; position: relative; padding-left: 10px; line-height: 35px; color: #fff; } .box div.title a { position: absolute; right: 5px; font-size: 16px; color: #fff; } .box div.list { min-height:60px; padding: 10px; } .box div.list p { height: 24px; line-height: 60px; font-size:14px; } .box div.end { min-height:30px; padding: 5px; } #bg { background-color: #666; position: absolute; z-index: 99; left: 0; top: 0; display: none; width: 100%; height: 100%; opacity: 0.5; filter: alpha(opacity=50); -moz-opacity: 0.5; } 4.编写myalert function myalert(msg) { $("#bg").css({ display: "block", //height:$(document).height() height: "100%", position: "fixed" }); var $box = $('.box'); $box.css({ //设置弹出层距离左边的位置 left: ($("body").width() - $box.width()) / 2 + "px", //设置弹出层距离上⾯的位置 top: ($(window).height() - $box.height()) / 2 - $(window).scrollTop() - $box.height() + "px", display: "block" }).find("p").html(msg); }。
wpf datepickertextbox 样式
在WPF中，DatePickerTextBox是DatePicker控件的一个部分，用于显示和编辑日期。
如果你想更改DatePickerTextBox的样式，你可以通过定义一个样式并将其应用于DatePickerTextBox来实现。
以下是一个简单的例子，展示了如何更改DatePickerTextBox的背景颜色和前景颜色：xml复制代码<Style x:Key="MyDatePickerTextBoxStyle" TargetType="{x:Type DatePickerTextBox}"><Setter Property="Background" Value="LightBlue"/><Setter Property="Foreground" Value="DarkBlue"/></Style><!-- 在你的DatePicker控件中使用这个样式 --><DatePicker x:Name="MyDatePicker"DatePickerTextBoxStyle="{StaticResourceMyDatePickerTextBoxStyle}"/>在这个例子中，我们首先定义了一个名为MyDatePickerTextBoxStyle的样式，并指定了目标类型为DatePickerTextBox。
然后，我们使用Setter元素来设置背景颜色为淡蓝色和前景颜色为深蓝色。
最后，我们将这个样式应用于名为MyDatePicker的DatePicker控件中的DatePickerTextBox部分。
请注意，样式资源需要在同一个命名空间中定义，或者你可以使用完整的名称来引用样式资源。
vb borderstyle 属性
BorderStyle 属性返回或设置对象的边框样式。
对Form 对象和Textbox 控件在运行时是只读的。
语法object.BorderStyle = [value]BorderStyle 属性语法有这些组成部分：设置值Form 对象的BorderStyle 属性设置值如下：MS Flex Grid、Image、Label、OLE 容器、PictureBox、Frame 和TextBox控件的BorderStyle 属性设置值如下：Line 和 Shape 控件的BorderStyle 属性设置值如下：说明对于窗体，BorderStyle 属性决定了其主要特征，这些特征从外观上就能确定窗体是通用窗口或对话框。
设置值 3（固定对话框）用于标准对话框。
设置值 4（固定工具窗口）和 5（可变工具窗口）用于创建工具箱样式的窗口。
设置值为 2（可变尺寸）的 MDI 子窗体，以 Windows 运行环境运行时定义的缺省尺寸，在 MDI 窗体内显示。
对于任何其它设置值，窗体按设计时指定的大小显示。
改变Form 对象的BorderStyle 属性设置值，可能会改变MinButton、MaxButton和ShowInT askbar 属性的设置值。
当BorderStyle 设置为1（固定单边框）或2（可变尺寸）时，MinButto n、MaxButton 和ShowInTaskbar 属性自动设置为True。
当BorderStyle 设置为0（无）、3（固定对话框）、4（固定工具窗口）或5（可变工具窗口）、MinButton、MaxButton和Show InTaskbar 属性自动设置为False。
注意如果带有菜单的窗体设置为 3（固定对话框），该窗体将按设置值 1（固定单边框）显示。
运行时，窗体或者是模式的或者是无模式的，都可以用Show 方法指定。
应用于：Form 对象、Forms 集合Frame 控件Function 控件（数据报表设计器）Image 控件Image 控件（数据报表设计器）Label 控件Label 控件（数据报表设计器）Line 控件Line 控件（数据报表设计器）MSChart 控件OLE 容器控件PictureBox 控件Shape 控件Shape 控件（数据报表设计器）Slider 控件TextBox 控件UserControl 对象相关基础知识：运行时代码正在运行的时期。
JS如何设置元素样式的方法示例
JS如何设置元素样式的⽅法⽰例⼀看到这个标题，⼤家可能⾸先想到的就是使⽤“[元素].style.[CSS属性名] = [属性值]”这样的套路去设置元素样式，但实际上，我们其实还有其他⽅式可以选择。
接下来，我将详细介绍三种设置元素样式的⽅式。
⼀、style这个其实就是我们所熟知的⽅式，举个例⼦~~<div id="box"></div>var box = document.getElementById("box");box.style.width = '100px';box.style.height = '100px';box.style.backgroundColor = "#f00";显⽰效果：这种⽅式看似简单粗暴，但写法过于繁冗，尤其是在需要添加很多样式时尤为突出。
并且需要注意的是，对于使⽤短划线的CSS属性名，必须将其转换成驼峰⼤⼩写形式。
（如⽰例中的backgroundColor）⼆、style.cssText这种⽅式相对于上⾯⽅法更为简洁，更像是直接在元素上写CSS：[元素].style.cssText = [CSS样式];例如：box.style.cssText = 'width: 200px; height: 200px; border: 1px solid #f00;';确实，写法上很⽅便。
但是，缺点是后⾯同样通过这种⽅式添加的样式会覆盖之前通过style特性指定的样式。
同样还是上⾯的例⼦，只不过是将两段JS写在⼀块：var box = document.getElementById("box");box.style.width = '100px';box.style.height = '100px';box.style.backgroundColor = "#f00";box.style.cssText = 'width: 200px; height: 200px; border: 1px solid #f00;';如果按照层叠样式表的特性，上⾯定义的红⾊的背景颜⾊应该还存在，然⽽实际上，下⾯通过style.cssText⽅式定义的样式会将style（包括style.cssText）⽅式添加的样式全部重写。
TCXGRID控件常用属性介绍
TCXGRID控件常用属性介绍TCXGRID控件:属性:ActiveLevel: 当前层BorderStyle: 窗口风格Color: 颜色FocusedView: 当前View;Font: 字体LevelTabs: 类似PageControls头设置CaptionAlgnment:标题对齐方式Images:图标Style:风格Levels:RootLevelOptions:层选项DetailTabsPosition: 类似PageControls头显示位置; TabsForEmptyDetails: 如果数据为空是否显示TabsTcxGridLevel组件:属性：Active: 读写激活该层;Controls: 读写指向TCXGrid;CanBeVisible: 读取是否能设置可见;Count: 读取子层个数;Displaycaption: 读取层标题；IsMaster: 读取是否cxgrid的最上层;Items: 读取层组，例: Items[0]访问第一个层;Level: 读取层级数;VisibleCount: 读取可见层个数VisibleIndex: 读取可见索引个数VisibleItems: 读取可见层组，例：VisibleItems[0]访问第一个可见层Caption: 读写层标题；GridView: 指定或读取该层的Grid显示;ImageIndex: 读写图标索引Options: TcxGridLevelOptions选项DetailFrameColor: 读或写明细表格颜色DetailFramWidth: 读或写明细表格DetailTabsPosition: 读或写Tab位置,类似PageControlsTabsStyles: 样式Tab: 读或设置tab样式tabsBackground: 读或设置tab背景样式Visible: 读或设置是否可见方法：Add: 增加一个Level;Levels[i].Add:增加一个子Level;TcxGridDBBandedT ableView组件:属性：BackGroundBitmaps:背景图片选项Background:背景图Bandbackground:带背景图Bankheader:带头背景Content:细节区背景filterBox:过滤区背景footer:注脚背景group: 组背景header:列头背景preview:预览区背景Bands:带列表DataController: 数据控制DataSource:数据源DetailKeyFieldNames:主从表时设置细表键字段名KeyFieldNames: 主从表时设置关键字段名MasterKeyFieldNames:主从表时设置主表键字段名Summary:合计组FooterSummaryItems:注脚定义FooterSummaryItems:组脚定义FilterBox:过滤框CustomizeDialog:是否自定义过滤条件Position:过滤框显示位置Visible:显示过滤框NavigatorButtons:导航条设置Append:增加按钮设置Enabled:是否禁用该按钮Visible:是否显示该按钮ImageIndex:图标IDCancel:取消按钮设置,具体设置同Append; ConfirmDelete:删除时是否确认提示Delete: 具体设置同Append;Edit: 具体设置同Append;First: 具体设置同Append;Insert: 具体设置同Append;Last: 具体设置同Append;Next: 具体设置同Append;Filter: 具体设置同Append; GotoBookmark: 具体设置同Append; NextPage: 具体设置同Append;Post: 具体设置同Append;Prior: 具体设置同Append;PriorPage: 具体设置同Append;Refresh: 具体设置同Append;SaveBookmark: 具体设置同Append;OptionsBehavior:行为选项AlwaysShowEditor:是否总是显示编辑条BandHeaderHints:带头是否显示提示CellHints:单元格是否显示提示ColumnHeaderHints:列头是否显示提示CopyCaptionsToClipboard:是否允许复制标题到剪贴板CopyPreviewT oClipboard:是否允许复制预览内容到剪贴板ExpandMasterRowOnDblClik:是否允许双击行显示明细FocusFirstCellOnNewRecord:新增记录时是否焦点指向第一列单元格GoToNextCellOnEnter:按回车是否自动跳到下一单元格NavigatorHints:是否显示导航条提示OptionsCustomize:自定义选项BandHiding:是否显示带BandMoving:是否允许拖动带ColumnFiltering:是否允许列过滤ColumnGrouping:是否允许列分组ColumnHiding:列头是否隐藏ColumnHorzSizing:是否允许调整列宽度ColumnMoving:是否允许列拖动ColumnSorting:是否允许列排序ColumnVertSizing:是否允许调整列高度DataRowSizing:是否允许调整数据行高度GroupBySorting:是否允许组排序GroupRowSizing:是否允许调整组行高度OptionData: 允许数据操作Appending: 是否允许增加CancelOnExit: 退出时是否自动取消修改Deleting: 是否允许删除DeletingConfirmation: 删除是否提示Editing :是否允许编辑Inserting: 是否允许插入OptionsSelection: 单元格操作CellMultiSelect:是否允许选择多单元格CellSelect: 进入单元格是否选择InvertSelect: 是否允许转换选择MultiSelect: 是否允许多行选择HideFocusRectOnExit: 移开是否隐藏焦点UnselectFocusedRecordOnExit:移开是否允许取消焦点OptionsView:表格选项BandCaptionsInColumnAlternateCaption:是否允许在列里修改带标题BandHeaderHeight: 带头高度BandHeaderLineCount: 带头显示行数BandHeaders: 是否显示带头CellAutoHeight:单元格是否自动高度CellTextMaxLineCount: 单元格文本最大行数ColumnAutoWidth: 列是否自动宽度DataRowHeight: 数据行高度Footer:是否允许显示注脚FooterAutoHeight: 注脚是否自动适应高度FooterMultiSummaries:是否允许多注脚GridLineColor:表格行线颜色GridLines:显示表格行线类型GroupByBox:是否允许拖动列到分组区进行分组GroupFooters:显示组脚类型Header:是否显示列头HeaderAutoHeight:列头是否自动适应高度HeaderHeight: 列头高度IndicatorWidth:是否显示左边指示条IndicatorWidth: 指示条宽度Navigator: 是否显示导航条NavigatorOffSet: 导航条偏移位置ShowColumnFilterButtons: 是否显示列过滤按钮ShowEditButtons: 是否显示编辑按钮Preview:预览选项AutoHeight:是否自动适应高度Column:要预览的列，只能选一列LeftIndent: 左缩进点数MaxLineCount:最大显示行数RightIndent:右缩进点数Visible: 预览是否可见PopupMenu:弹出菜单Styles:样式或风格组BackGround:背景风格Content:明细风格Footer:注脚风格Group:组风格GroupSummary:组合计区风格Header:头风格Indicator:指示区风格Preview:预览区风格Selection:选择区风格StyleSheet:风格组，选中后自动设置各区风格方法或函数：CreateColumn:参数：无；功能：新建一列;返回：返回列类型结果; GetColumnByFieldName：参数：字段名串；功能：取得指定字段列;返回：返回列类型结果;例：MyTV.GetColumnByFieldName('First').Visible := False; CleaarItems:参数：无；功能：清除全部显示列;返回：无CreateItem:参数：无；功能：建一显示列;返回：列类型值StoreToIniFile:导出布局到Ini文件StoreToRegistry:导出布局到注册表StoreToStream:导出布局到流体RestoreFromIniFile: 从Ini文件恢复布局RestoreFromRegistry:从注册表恢复布局RestoreFromStream:从流体恢复布局FindItemByID:根据ID号查找列FindItemByName:根据列名查找列FindItemByTag:根据Tag查找列IndexofItem:返回列的序号CreateViewInfo:建表格TCXGRID用法指南假设已设定以下变量MycxGrid: TcxGrid;MycxGridLevel: TcxGridLevel;MyTV: TcxGridDBT ableView;MyDataSource: TDataSource;方法：一、建层和层视图MycxGrid := T cxGrid.Create(self);MycxGridLevel := MycxGrid.Levels.Add; //建层MyTV:=TcxGridDBTableView(MycxGrid.createview(TcxGridDBTableView)); //建视图MycxGridLevel.Control := MycxGrid;//指定关系MycxGridLevel.GridView := MyTV;//指定视图TcxGridDataController(GetDetailDataController(FocusedRec ordIndex, 0)).GridView;//得到下层视图二、设定表格位置和大小MycxGrid.ParentWindow := self.Handle;MycxGrid.T op := 0;MycxGrid.Height := 200;MycxGrid.Width := 400;MyTV.Preview.visible := true;三、设定数据源及分配全部字段MyTV.DataController.DataSource := MyDataSource;MyTV.DataController.DeleteAllItems; //清除全部字段MyTV.DataController.CreateAllItems; //建全部显示字段四、动态增加显示列及列访问variIndex: integer;vCol: TcxGridDBColumn;vImgCom: T cxImageComboBoxItem;i,j: integer;for i:= 0 to Mydatasource.dataset.FieldCount -1 dobeginvCol := MyTV.CreateColumn;vCol.DataBinding.FieldName:=Mydatasource.dataset.Fields[i ].FieldName;if (i = 1) thenbeginvCol.PropertiesClassName := 'TcxImageComboBoxProperties'; ////分区分大小写vCol.DataBinding.ValueType := 'String';for j := 0 to 5 dobeginvImgCom:=TcxImageComboBoxProperties(vCol.Properties).I tems.Add;vImgCom.Description := IntToStr(j);vImgCom.Value := IntToStr(j);end;end;end;showmessage(MyTV.Columns[0].Caption);//列标题访问showmessage(MyTV.Columns[0].DataBinding.FieldName);//列字段名访问MyTV.Columns[0].SortIndex := 0;MyTV.Columns[0].SortOrder := soAscending; //列升序排序MyTV.Columns[0].SortIndex := -1;MyTV.Columns[0].SortOrder := soNone; //取消列排序MyTV.DataController.Search.Locate(MyTV.GetColumnByField Name(FieldName).Index, 查找值);// 列值搜索MyTV.DataController.FocusedRowIndex :=MyTV.DataController.FocusedRowIndex - 1;//记录回翻,即Prior;DBView.DataController.FocusedRowIndex := DBView.DataController.FocusedRowIndex + 1; //记录后翻,即Next;Aa:=MyTV.datacontroller.values[1,1] ;// 访问第二行第二列的值MyTV.Columns[0].DataBinding.ValueTypeClass := TcxStringValueType;//设置列字段类型,其他如整型[TcxIntegerValueType],浮点型[TcxFloatValueType];//设置列风格:MyFirstColumnStyle := TcxStyle.Create(Self);MyFirstColumnStyle.Color := clAqua;MyFirstColumnStyle.TextColor := clBlue;MyTV.Columns[1].Styles.Content := MyFirstColumnStyle;//设置列下拉框选择列表及类型varA:TDataSource:B:TcxlookupcomboboxProperties;beginA:=TDataSource.create(self);B:=tcxlookupcomboboxproperties.create(self);A.Dataset:=Dic_ry_xb;//此处指定数据源。
MapboxStyle规范
MapboxStyle规范（）致⼒于打造全球最漂亮的个性化地图。
这⾥记录下其 Web 端 API 的地图样式规范的各个配置项：必填项会加上*，⽅便根据⽬录进⾏查看1. version *version：版本号（必填，且值必须为8）"version": 82. namename：名称（可选，⽤于给style取名，⽅便阅读）"name": "demo"3. metadatametadata：元数据（可选，⽤于给style附加⼀些任意属性。
为避免冲突，为避免冲突，建议添加前缀，如mapbox:）"metadata": {"mapbox:name":"demo"}4. centercenter：地图的默认中⼼点（可选，由经度和纬度构成）"center": [106.66339, 30.42628]5. zoomzoom：地图的默认缩放层级（可选，值越⼤，越靠近地表。
mapbox采⽤的是⽆极缩放，范围⼀般为0 ~ 24）"zoom": 86. bearingbearing：地图的默认⽅位⾓（可选，表⽰地图视⼝正上⽅中⼼点在地图上北偏东的⾓度。
默认值为0）"bearing": 07. pitchpitch：地图的默认倾斜⾓度（可选，默认值为0，范围为0 ~ 60）"pitch": 08. spritesprite：雪碧图（可选，⽤来指定获取雪碧图及其元数据的 URL）sprite的⾳译是雪碧，直译是精灵，表⽰不受地图旋转缩放影响的图标等，类似精灵漂浮在空中。
当有layer使⽤了background-pattern、fill-pattern、line-pattern、fill-extrusion-pattern、icon-image等属性时，sprite必填。
style属性
以下是CSS样式属性字体属性如下：font-family:用于设置字体名称，可以设置多个字体名称，用逗号隔开font-size：设置字体大小。
绝对大小设置的值为xx-small，x-small，medium，large，x-large、xx-large。
相对大小设置：larger，smaller，绝对单位：px，mm，cm，in，pt，pc（这些大小不会随浏览器大小改变而改变）相对单位有：em（是原始显示的二倍），ex（当前的字体是原始字体大小的3倍），%（设置字体的百分比）。
font-style:设置文字显示方式text-decoration：设置文本的上滑线、下滑线、中划线font-weight：用于指定粗体字的大小。
font-variant：显示区域内的所有字母都用大写显示text-transform：可以设置区域内的英文单词的每个首字母大小，或者把所有的字母大写或者小写color：字体颜色有背景属性background-color：背景颜色background-image：背景图像background-repeat：设置背景图片的显示方式，值为：on-repeat（背景图片只显示一次）、repeat（表示在背景上水平和垂直方向上重复平铺图像）、repeat-x（表示水平重复平铺铺背景图像）repeat-y（表示垂直重复平补背景图像）background-attachment：确定背景图片是否更具内容的滚动儿滚动；他的设置值：fixe(表示背景图片固定),scroll（表示背景图片随文字的滚动而滚动）background-position：指定背景图像的水平位置和垂直位置，设置值为：水平设置的值有：left、center、right、或、20px（设置一个值），垂直位子的取值有：top、center，bottombackground：上面各种的简写文本属性如下：word-spacing：设置单词之间的间距letter-spacing：用来设置每个字符之间的间距vertical-align：文本的垂直对齐方式：他的取值有：sub（下标）、super（上标）top（与顶对齐）、middle（中间对齐）、bottom（与低端对齐），取相对于元素的百分比text-align:用于设置文本的水平对齐方式，设置的值有：left，right，center，justifytext-indent:设置文本第一行的缩进值white-space：处理文本中的空白字符，设置的值有：normal（默认的把所有的空白压缩成一个空格）、pre（空白原样输出）、nowrap：表示只有遇到<br/>标签时才进行换行，否则一直不换行元素位置设定属性Position：用来设定元素的定位方式，设置的值有：absolute（元素的决定定位）、relative（相对定位）、static（通用定位方法）left：设置元素左边的水平位置top：设置元素顶部的位置width：设置元素的宽度height：设置元素的高度z-index：设置元素堆叠的所属层位。
《HTML5+CSS3网站设计基础教程》
《《HTML5+CSS3网站设计基础教程》》试卷得分单选题（每题2分，共计30分）1．页面上的div标签，其HTML代码为<div id="box" style="color:red">文字</div>，为其设置CSS样式如下：#box{color:blue;}那么，文字的颜色将显示为( )A、红色B、蓝色C、黑色D、以上选项都不正确2．下列选项中，能够让元素倾斜显示的变形函数是（）。
A、translate（）方法B、scale()方法C、skew()方法D、rotate()方法3．下面的选项中,id选择器的基本语法格式正确的是（）A、. #id名{属性值1;属性值2;属性值3; }B、#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}C、#id名{属性1:属性值1，属性2:属性值2，属性3:属性值3}D、#id名{属性1:“属性值1”; 属性2:“属性值2”; 属性3:“属性值3”; }4．下列样式代码中，可实现元素的溢出内容被修剪，且被修剪的内容不可见的是（）。
A、overflow:visible;B、overflow: hidden;C、overflow: auto;D、overflow: scroll;5．下列选项中，用于更改元素左内边距的是（）。
A、text-indent总分题型单选题多选题填空题简答题题分得分B、padding-leftC、margin-leftD、padding-right6．页面上的div标签，其HTML结构如下：<div id="father"><p class="son">传智播客</p></div>对应的CSS样式代码如下：#father #son{color:red;}#father p{color:blue;}div .son{color:yellow;}div p{color:green;}那么，文字的颜色将显示为（）A、红色B、蓝色C、黄色D、绿色7．<span>标记是网页布局中常见的标记，其显示类型为（）。
CSS实现垂直居中的几种方法
CSS实现垂直居中的⼏种⽅法单⾏⽂本的居中1.⽂字⽔平居中1<div class='box' style="text-align: center;">hello world</div>2.⽂本垂直⽔平居中1<div class="box2" style="width:150px;height:100px;line-height: 100px;">⽂本垂直⽔平居中</div>⼆、多⾏⽂本的垂直居中1.使⽤display:flex实现flex布局会让容器内的元素得到垂直⽔平居中1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>登陆</title>6<style type="text/css">7 html{width: 100%;height: 100%;} /*整个页⾯的居中*/8 body{9 width: 100%;10 height: 100%;11 display: flex; /*flex弹性布局*/12 justify-content: center;13 align-items: center;14 }15 #login{16 width: 300px;17 height: 300px;18 border: 1px black solid;19 display: flex;20 flex-direction: column; /*元素的排列⽅向为垂直*/21 justify-content: center; /*⽔平居中对齐*/22 align-items: center; /*垂直居中对齐*/23 }24</style>25</head>26<body>27<div id="login">28<h1>登陆</h1>29<input type="text"><br>30<input type="password"><br>31<button>确定</button>32</div>33</body>34</html>2.使⽤display:-webkit-box实现1 body{2 width: 100%;3 height: 100%;4 display: -webkit-box; /*flex弹性布局*/5 -webkit-box-align: center;6 -webkit-box-pack: center;7 }display:flex和display:box都可⽤于弹性布局实现⽔平垂直居中，不同的是display:box是2009年的命名，已经过时，⽤的时候需要加上前缀；display:flex是2012年之后的命名3.使⽤绝对定位和负边距 CSS代码：<style>.box{width: 150px;height: 150px;background:blue;position: relative;}p{width: 50px;height: 50px;background:red;position: absolute;left:50%;top:50%;margin-left:-25px;margin-top: -25px;display: flex;align-items: center;justify-content: center;}</style> HTML代码：1<div class="box"><p>A</p></div>4.使⽤transform:translate定位1 <style>2 *{padding: 0;margin: 0;} /*解决容器内元素.div是p元素产⽣的居中不完整*/3 .box{4 margin: 20px auto;5 width: 150px;height: 150px;6 background:blue;7 position: relative;8 text-align: center;9 }10 .box .div1{11 position: absolute;12 top:50%;13 left:50%;14 width:100%;15 transform:translate(-50%,-50%);16 text-align: center;17 background: red18 }19 </style> 说明：/*⼀般情况下⼦元素不能是p元素，否则⾮完全居中，P元素⾃带有padding距离*/，.div1如果必须是p元素则必须加上*{margin:0;padding:0;};进⾏初始化，5.绝对定位和01 .box p{2 width:50%;3 height: 50%;4 overflow: auto;5 position: absolute;6 background:red;7 margin: auto;8 top:0;9 bottom:0;10 left:0;11 right:0;12 }6.通过display:table-cell1 .box{2 width: 150px;height: 150px;3 background:blue;4 position: relative;5 text-align: center;6 display: table-cell;7 vertical-align: middle;8 }缺点：对容器.box的⼦元素的设置宽⾼会造成失效。