我对html / css的某些“基本知识”有疑问 我正在使用语义ui，试图创建“显示/隐藏”的侧边栏，但是大小，边距混乱了。 因此页面分为“左+右”，左=侧边栏，右=内容。 我的问题是如何完美地将内容居中。 是制作侧边栏的正确方法吗？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>test4</title>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
<!-- <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> -->
</head>
<style>
body, html {
height: 100%;
}
.left {
background-color: #EB2939;
width:50px;
transition: width 0.4s ;
position: absolute;
height:100%;
top:0;
left:0;
}
.active{
background: black;
color: white;
}
.left .icon {
margin:15px;
max-width:20px;
color:#fff;
}
.item {
height:50px;
overflow:hidden;
color:#fff;
}
.item:hover{
background-color: white;
color: black;
}
.item:hover i {
color: black;
}
.item span {
font-weight: bold;
color: white;
}
.right{
transition: margin-left 0.4s ;
}
.bord{
border: 2px solid black;
}
#leftlist .item{
color: black;
}
#leftlist, #rightlist{
overflow: scroll;
max-height: 300px;
}
</style>
<body>
<div class="row" id="fullh">
<div class="left">
<div class="item" id="burgericon">
<i class="large sidebar large icon"></i>
</div>
<a href="#">
<div class="item">
<i class="home large icon"></i>
acceuil
</div>
</a>
<a href="#">
<div class="item">
<i class="home large icon"></i>
Accuiel
</div>
</a> <a href="#">
<div class="item">
<i class="home large icon"></i>
Accuiel
</div>
</a> <a href="#">
<div class="item">
<i class="home large icon"></i>
Accuiel
</div>
</a>
</div><!--end left -->
</div><!-- end row -->
<div class="right">
<div class="ui container">
<div class="ui centered grid">
<div class="row">
<div class="ui statistics bord">
<div class="statistic">
<div class="value">
22
</div>
<div class="label">
Saves
</div>
</div>
<div class="statistic">
<div class="text value">
Three<br>
Thousand
</div>
<div class="label">
Signups
</div>
</div>
<div class="statistic">
<div class="value">
<i class="plane icon"></i> 5
</div>
<div class="label">
Flights
</div>
</div>
<div class="statistic">
<div class="value">
<img src="/images/avatar/small/joe.jpg" class="ui circular inline image">
42
</div>
<div class="label">
Team Members
</div>
</div>
</div>
</div>
<div class="ui row equal width grid">
<div class="column">
<div id="rightlist">
<table class="ui very basic table" >
<thead>
<tr>
<th>Name</th>
<th>Status</th>
<th>Notes</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Approved</td>
<td>None</td>
</tr>
<tr>
<td>Jamie</td>
<td>Approved</td>
<td>Requires call</td>
</tr>
<tr>
<td>Jill</td>
<td>Denied</td>
<td>None</td>
</tr>
<tr>
<td>Jill</td>
<td>Denied</td>
<td>None</td>
</tr>
<tr>
<td>Jill</td>
<td>Denied</td>
<td>None</td>
</tr>
<tr>
<td>Jill</td>
<td>Denied</td>
<td>None</td>
</tr>
<tr>
<td>Jill</td>
<td>Denied</td>
<td>None</td>
</tr> <tr>
<td>Jill</td>
<td>Denied</td>
<td>None</td>
</tr> <tr>
<td>Jill</td>
<td>Denied</td>
<td>None</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="column">
<div id="rightlist">
<table class="ui very basic table" >
<thead>
<tr>
<th>Name</th>
<th>Status</th>
<th>Notes</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Approved</td>
<td>None</td>
</tr>
<tr>
<td>Jamie</td>
<td>Approved</td>
<td>Requires call</td>
</tr>
<tr>
<td>Jill</td>
<td>Denied</td>
<td>None</td>
</tr>
<tr>
<td>Jill</td>
<td>Denied</td>
<td>None</td>
</tr>
<tr>
<td>Jill</td>
<td>Denied</td>
<td>None</td>
</tr>
<tr>
<td>Jill</td>
<td>Denied</td>
<td>None</td>
</tr>
<tr>
<td>Jill</td>
<td>Denied</td>
<td>None</td>
</tr> <tr>
<td>Jill</td>
<td>Denied</td>
<td>None</td>
</tr> <tr>
<td>Jill</td>
<td>Denied</td>
<td>None</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div><!--end right -->
<script>
var click = 'open';
$('#burgericon').click(function(){
if(click== 'open'){
$('.left').css('width', '200px');
$('.right').css('margin-left', '200px');
$('.right').css('display', 'block');
click = 'close';
}else{
$('.left').css('width', '50px');
$('.right').css('margin', '0px');
click = 'open';
}
})
/*
$('.item').hover(function(){
$('.item').css('background-color', '#EB2939');
$('.item i').css('color', 'white');
$(this).css('background-color', 'white');
$(this).find('i').css('color', '#EB2939');
})
*/
</script>
</body>
</html>