This example uses OpenLayers v10.9.0. The latest is v.
Edit

#### View Padding

center 2 padding 1 view 2 shift 1

#####

This example demonstrates the use of the view's padding option.

This example demonstrates how a map's view can be configured to accommodate for viewport space covered by other elements. If the map viewport is partially covered with other content (overlays) along its edges, the `padding` option allows to shift the center of the viewport away from that content. The shifted viewport center will also be the anchor for zooming in and out with the Zoom controls, and for rotating.

Use `Alt+Shift+Drag` to rotate the map.

##### main.js

    import Map from 'ol/Map.js';
    import View from 'ol/View.js';
    import GeoJSON from 'ol/format/GeoJSON.js';
    import TileLayer from 'ol/layer/Tile.js';
    import VectorLayer from 'ol/layer/Vector.js';
    import {fromLonLat} from 'ol/proj.js';
    import OSM from 'ol/source/OSM.js';
    import VectorSource from 'ol/source/Vector.js';
    import CircleStyle from 'ol/style/Circle.js';
    import Fill from 'ol/style/Fill.js';
    import Stroke from 'ol/style/Stroke.js';
    import Style from 'ol/style/Style.js';

    const source = new VectorSource({
      url: 'data/geojson/switzerland.geojson',
      format: new GeoJSON(),
    });
    const style = new Style({
      fill: new Fill({
        color: 'rgba(255, 255, 255, 0.6)',
      }),
      stroke: new Stroke({
        color: '#319FD3',
        width: 1,
      }),
      image: new CircleStyle({
        radius: 5,
        fill: new Fill({
          color: 'rgba(255, 255, 255, 0.6)',
        }),
        stroke: new Stroke({
          color: '#319FD3',
          width: 1,
        }),
      }),
    });
    const vectorLayer = new VectorLayer({
      source: source,
      style: style,
    });
    const view = new View({
      center: fromLonLat([6.6339863, 46.5193823]),
      padding: [170, 50, 30, 150],
      zoom: 6,
    });
    const map = new Map({
      layers: [
        new TileLayer({
          source: new OSM(),
        }),
        vectorLayer,
      ],
      target: 'map',
      view: view,
    });

    vectorLayer.getSource().on('featuresloadend', function () {
      const zoomtoswitzerland = document.getElementById('zoomtoswitzerland');
      zoomtoswitzerland.addEventListener(
        'click',
        function () {
          const feature = source.getFeatures()[0];
          const polygon = feature.getGeometry();
          view.fit(polygon);
        },
        false,
      );

      const centerlausanne = document.getElementById('centerlausanne');
      centerlausanne.addEventListener(
        'click',
        function () {
          const feature = source.getFeatures()[1];
          const point = feature.getGeometry();
          view.setCenter(point.getCoordinates());
        },
        false,
      );
    });

##### index.html

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <title>View Padding</title>
        <link rel="stylesheet" href="node_modules/ol/ol.css">
        <style>
          .map {
            width: 100%;
            height: 400px;
          }
          .mapcontainer {
            position: relative;
            margin-bottom: 20px;
          }
          .map {
            width: 1000px;
            height: 600px;
          }
          .map .ol-zoom {
            top: 178px;
            left: 158px;
          }
          .map .ol-rotate {
            top: 178px;
            right: 58px;
          }
          .map .ol-attribution,
          .map .ol-attribution.ol-uncollapsible {
            bottom: 30px;
            right: 50px;
          }
          .padding-top {
            position: absolute;
            top: 0;
            left: 0px;
            width: 1000px;
            height: 170px;
            background: rgba(255, 255, 255, 0.5);
          }
          .padding-left {
            position: absolute;
            top: 170px;
            left: 0;
            width: 150px;
            height: 400px;
            background: rgba(255, 255, 255, 0.5);
          }
          .padding-right {
            position: absolute;
            top: 170px;
            left: 950px;
            width: 50px;
            height: 400px;
            background: rgba(255, 255, 255, 0.5);
          }
          .padding-bottom {
            position: absolute;
            top: 570px;
            left: 0px;
            width: 1000px;
            height: 30px;
            background: rgba(255, 255, 255, 0.5);
          }

        </style>
      </head>
      <body>
        <div class="mapcontainer">
          <div id="map" class="map"></div>
          <div class="padding-top"></div>
          <div class="padding-left"></div>
          <div class="padding-right"></div>
          <div class="padding-bottom"></div>
        </div>
        <button id="zoomtoswitzerland">Zoom to Switzerland</button>
        <button id="centerlausanne">Center on Lausanne</button>

        <script type="module" src="main.js"></script>
      </body>
    </html>

##### package.json

    {
      "name": "view-padding",
      "dependencies": {
        "ol": "10.9.0"
      },
      "devDependencies": {
        "vite": "^3.2.3"
      },
      "scripts": {
        "start": "vite",
        "build": "vite build"
      }
    }