Fatal编程技术网
  • html/
  • Html 如何以最有效的方式将div水平和垂直居中？

Html 如何以最有效的方式将div水平和垂直居中？

html css

Html 如何以最有效的方式将div水平和垂直居中？,html,css,centering,Html,Css,Centering,我在advanced中表示歉意，因为我知道这是一个非常基本的新手错误-但无论我添加了什么，我的主容器都不会在页面中居中。我知道有很多方法可以实现这一目标，但最终我会尝试实践“良好的编码”习惯，并尽可能提高效率（与许多空白和填充相反）。目标是最终使其看起来像这样： 以下是我的代码（到目前为止）： 厨师 顶部 正文{背景色：#e6eaeb； 颜色：#e6eaeb； 字体系列：'Roboto'，无衬线； 字体大小：10px； 文本对齐：左对齐； 字距：3px； 文本转换：大写；} /*挑选*/ ：

我在advanced中表示歉意，因为我知道这是一个非常基本的新手错误-但无论我添加了什么，我的主容器都不会在页面中居中。我知道有很多方法可以实现这一目标，但最终我会尝试实践“良好的编码”习惯，并尽可能提高效率（与许多空白和填充相反）。目标是最终使其看起来像这样：

以下是我的代码（到目前为止）：


厨师
顶部
正文{背景色：#e6eaeb；
颜色：#e6eaeb；
字体系列：'Roboto'，无衬线；
字体大小：10px；
文本对齐：左对齐；
字距：3px；
文本转换：大写；}
/*挑选*/
：：选择{背景：#ff40f3；}
：-moz选择{背景：#ff40f3；}
/*选择结束*/
/*滚动条*/
：-webkit滚动条拇指{背景：#ff62f5；
边界半径：25px；线性渐变（至底部，#b1e0f5，#ffc4f6）；
宽度：8px；
高度：5px；}
：-网络工具包滚动条{背景：#292929；
边界半径：25px；
高度：5px；
宽度：8px；}
/*滚动条的末尾*/
/*滚动到顶部按钮*/
#stt{位置：固定；/*固定/粘滞位置*/
z指数：9999999999；
显示：无；/*默认情况下隐藏*/
顶部：613px；/*将按钮放在页面底部*/
左侧：1029px；/*从右侧放置按钮30px*/
边框：无；/*删除边框*/
大纲：无；/*删除大纲*/
字体系列：'Bowlby One'，草书；
背景色：#02afff；/*设置背景色*/
颜色：#e6eaeb；
光标：指针；/*在悬停时添加鼠标指针*/
填充：8px；
边界半径：15px；/*圆角*/
文本转换：大写；
文本对齐：居中；
字体大小：9px；/*增大字体大小*/}
/*滚动到顶部按钮的结束*/
.maincontainer{背景色：#313131；
宽度：785px；
身高：472px；
颜色：#313131；
边框顶部：25px实心#02afff；
边框底部：25px实心#02afff；
保证金：自动；
-网络工具包盒阴影：0px 5px 10px 1px rgba（0,0,0,0.39）；
-莫兹盒阴影：0px 5px 10px 1px rgba（0,0,0,0.39）；
盒子阴影：0px 5px 10px 1px rgba（0,0,0,0.39）；}
#波{位置：固定；
z指数：-100；
宽度：100%；
底部：-3px；
背景重复：重复-x；
左：0px；
右：0px；}
你好！
使事物居中的最佳方法是使用或。它们都提供响应性强的样式，而无需更改每个设备的布局

要在页面上居中放置div，可以应用以下样式：

.center{
显示器：flex；
证明内容：中心；
对齐项目：居中；
高度：100vh；
}
这将使用flexbox实现布局通知显示：flex

如果将此应用于div，它将使其具有100视口高度（占屏幕的100%），并且内部的所有内容都将居中

这是否回答了您的问题？ 
<!DOCTYPE html>
<html>
<head>
 
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, width=device-width"/>
 
<!-- BROWSER TITLE -->
<title>cookiess</title>
<!-- END OF BROWSER TITLE -->
 
<!-- BROWSER ICON -->
<link rel="shortcut icon" href="https://66.media.tumblr.com/e948812964cb16505f4cd4f894344288/672e88b582120b94-84/s540x810/9301ad0a7a1dc0235256ca2aa89738258b0383a5.png">
<!-- END OF BROWSER ICON -->
 
<!-- FONTS -->
<link href="https://fonts.googleapis.com/css2?family=Bowlby+One&display=swap" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,400italic,900,700,700italic,500italic,500' rel='stylesheet' type='text/css'>
<!-- END OF FONTS -->

<!-- SMOOTH SCROLL SCRIPT -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.1/SmoothScroll.min.js"></script>
<!-- END OF SMOOTH SCROLL SCRIPT -->

<!-- SCROLL TO TOP BUTTON -->
<button onclick="topFunction()" id="stt" title="Go to top">Top</button>
<!-- END OF SCROLL TO TOP BUTTON -->

<style type="text/css">

body { background-color:#e6eaeb;
color:#e6eaeb;
font-family:'Roboto', sans-serif;
font-size:10px;
text-align:left;
word-spacing:3px;
text-transform:uppercase; }

/* SELECTION */
::selection { background:#ff40f3; }
::-moz-selection { background:#ff40f3; }
/* END OF SELECTION */
 
/* SCROLLBAR */
::-webkit-scrollbar-thumb { background:#ff62f5;
border-radius:25px;linear-gradient(to bottom, #b1e0f5 , #ffc4f6);
width:8px;
height:5px; }
 
::-webkit-scrollbar { background:#292929;
border-radius:25px;
height:5px;
width:8px; }
/* END OF SCROLLBAR */

/* SCROLL TO TOP BUTTON */
#stt { position: fixed; /* Fixed/sticky position */
z-index:99999999999999;
display: none; /* Hidden by default */
top:613px; /* Place the button at the bottom of the page */
left:1029px; /* Place the button 30px from the right */
border: none; /* Remove borders */
outline: none; /* Remove outline */
font-family:'Bowlby One', cursive;
background-color: #02afff; /* Set a background color */
color:#e6eaeb;
cursor: pointer; /* Add a mouse pointer on hover */
padding:8px;
border-radius: 15px; /* Rounded corners */
text-transform:uppercase;
text-align:center;
font-size: 9px; /* Increase font size */ }
/* END OF SCROLL TO TOP BUTTON */

.maincontainer { background-color:#313131;
width:785px;
height:472px;
color:#313131;
border-top:25px solid #02afff;
border-bottom:25px solid #02afff;
margin:auto;
-webkit-box-shadow: 0px 5px 10px 1px rgba(0,0,0,0.39);
-moz-box-shadow: 0px 5px 10px 1px rgba(0,0,0,0.39);
box-shadow: 0px 5px 10px 1px rgba(0,0,0,0.39); }

#wave { position:fixed;
z-index:-100;
width:100%;
bottom:-3px;
background-repeat:repeat-x;
left: 0px;
right: 0px; }

</style>
</head>
  <body>
  <div id="wave">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
         <path fill="#ffa6f9" fill-opacity="1" d="M0,192L34.3,176C68.6,160,137,128,206,149.3C274.3,171,343,245,411,256C480,267,549,213,617,192C685.7,171,754,181,823,186.7C891.4,192,960,192,1029,202.7C1097.1,213,1166,235,1234,240C1302.9,245,1371,235,1406,229.3L1440,224L1440,320L1405.7,320C1371.4,320,1303,320,1234,320C1165.7,320,1097,320,1029,320C960,320,891,320,823,320C754.3,320,686,320,617,320C548.6,320,480,320,411,320C342.9,320,274,320,206,320C137.1,320,69,320,34,320L0,320Z"></path>
    </svg>
</div>

 <div class="maincontainer">Hi there!</div>
  </body>
</html>